methods: {
...mapMutations([
'setToken'
])
} <!--使用-->
this.setToken(100); //token修改为100
Mutation 必须是同步函数，不要误解这句话，以为异步不能用，异步可以用在里面，视图的渲染，取值都没有问题，问题在于：调试的时候，一些浏览器调试插件不能正确监听state。所以方便调试，尽量将异步写入action中
Action篇
注意action的 参数不是 state ,而是context，context里面包含commit,state。基本操作：this.$store.dispatch(“函数名”,”值”)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})<!--辅助函数操作 注入在methods中-->
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([
"increment"
])
}
}
<!--使用-->
this.increment(123);
module篇
module 目的将store按功能拆分成多个文件，利于维护管理，module 分为2种情况，1.是有命名空间， 2.是没有命名空间
没有命名空间： action、mutation 和 getter 是注册在全局的，所以要注意，方法函数不要设置同名了，如果同名了会都执行。
stete例外是局部。
import Vue from 'vue';
import Vuex from 'vuex';
import moduleA from "./modules/cat.js";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: "vuex的token",
},
modules:{
moduleA
}
})export default store;
<!--moduleA.js-->
export default {
// namespaced: true,
state: {
cat:"我是cat",
},
mutations: {
setCat(state, val) {
state.cat = val;
}
},
actions: {
},
getters: {
}
};
无命名空间 取值
this.$store.state.moduleA.cat
或者
...mapState({
cat:state=>state.moduleA.cat,
}),不可以(state是局部，不可以这么取)：
...mapState([
"cat"
]),
无命名空间 改变值
和原来一样，因为方法是注册在全局的
this.$store.commit("setCat",666);
或者
...mapMutations([
"setCat"
])有命名空间： state, action、mutation 和 getter 是局部的，模块间命名互相不冲突，可以重名。
namespaced 设置为true,即可开启
<!--moduleA.js 文件-->
