vuex的使用总结
一、安装命令 npm install vuex
二、在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
export default store;
三、在 main.js里面引入store,然后再全局注入一下,这样一来就可以在任何一个组件里面使用this.$store了:
import store from './store/index.js'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
四、接下来看一下vuex的原理图
由图可以看出vuex可由state、mutation、actions三大部分,便于管理,我们可以在store文件夹中新建state.js、mutation.js、actions.js。
1.state.js
const state={
city:'上海'
}
export default state;
每添加一个js,一定要记得注入index.js中。到这里已经可以用this.$store.state.city在任何一个组件里面获取city定义的值了。
2.mutation.js
mutattions也是一个对象,这个对象里面可以放改变state的初始值的方法,具体的用法就是给里面的方法传入参数state或额外的参数,然后利用vue的双向数据驱动进行值的改变,同样的定义好之后也把这个mutations扔进Vuex.Store里面,如下:
const mutations={
changeCity(state,city){
state.city=city
}
}
export default mutations;
这时候你完全可以用 this.store.commit(‘changeCity’,‘北京’)方法,两个组件里用执行得到的值,每次都是一样的,这样肯定不是理想的需求
vuex官方API还提供了一个actions,这个actions也是个对象变量,最大的作用就是里面的Action方法可以包含任意异步操作,这里面的方法是用来异步触发mutations里面的方法,actions里面自定义的函数接收一个context参数和要变化的形参,context与store实例具有相同的方法和属性,所以它可以执行context.commit(’ '),然后也不要忘了把它也扔进Vuex.Store里面:
3.actions.js
const actions={
changeCity(ctx,city){
ctx.commit('changeCity',city)
}
}
export default actions;
在外部组件里进行全局执行actions里面方法的时候,你只需要用执行this.$store.dispatch(‘changeCity’)
综上几个js,index.js则为
import Vue from 'vue';
import Vuex from 'vuex';
import state from './rootState.js';
//import getters from './getters.js';
import mutations from './mutation.js';
import actions from './actions.js';
Vue.use(Vuex);
const store = new Vuex.Store({
state,
// getters,
actions,
mutations
});
export default store;
组件中调用的例子:
<template>
<div class="home_box">
<p>{{this.$store.state.city}}</p>
<ul>
<li @click="handleCity(item)" v-for="item in citylist">{{item}}</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return {
citylist:["北京","上海","广州","深圳"]
}
},
methods:{
handleCity(city){
this.$store.dispatch("changeCity",city);
}
}
}
</script>