vuex

如何使用vuex
1.安装：npm install vuex --save
2.在src目录下新建store文件夹，在里面新建一个index.js
使用vuex里面的modules
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
import dialog_store from '../components/dialog_store.js';//引入某个store对象
export default new vuex.Store({
modules: {
dialog: dialog_store
}
})
在dialog_store.js单独写dialog状态
3.在mian.js中实例化Vue对象时加入store对象
4.当有很多的状态需要管理的时候使用mutations（不区分组件）
mutations:{
switch_dialog(state){//这里的state对应着上面这个state
state.show = state.show?false:true;
//你还可以在这里执行其他的操作改变state
}
}
在父组件中使用$store.commit('switch_dialog')来触发mutations中的switch_dialog方法
5.当要执行多个mutations时就需要用action
actions:{
switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法
context.commit('switch_dialog');
//你还可以在这里触发其他的mutations方法
},
}
使用$store.dispatch('switch_dialog')来触发action
推荐讲一部操作放在action中
6.getters 计算state然后生成新的数据状态的
getters:{
not_show(state){//这里的state对应着上面这个state
return !state.show;
}
}
用 $store.getters.not_show 来获得状态 not_show
7.mapState,mapGetters,mapActions
//这里的三点叫做 : 扩展运算符
...mapState([
show:state=>state.dialog.show
]),
mapGetters 一般也写在 computed 中 , mapActions 一般写在 methods 中