mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
this.$store.commit(“mutation函数名”,发送到mutation中的数据)
Action
actions函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。
this.$store.dispatch(‘action中的函数名’,发送到action中的数据)
在action中提交mutation :
代码语言:javascript复制const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count
}
},
actions: {
increment (context) { //官方给出的指定对象, 此处context可以理解为store对象
context.commit('increment');
}
}
})
actions的不同写法
代码语言:javascript复制// 第一种写法简写形式
const actions = {
action的函数名({commit}) {
commit(“mutation函数名”, value); //调用mutation中的函数
//此处value可以是对象,可以是固定值等
}
}
// 第二种形式
const actions = {
action中的函数名(context) {
//context 官方给出的指定对象, 此处context可以理解为store对象
context.commit(“mutation函数名”, value); //调用mutation中的函数
}
}
1、流程顺序
“相应视图—>修改State”拆分成两部分,视图触发Action,Action再触发Mutation。
2、角色定位
基于流程顺序,二者扮演不同的角色。
Mutation:专注于修改State,理论上是修改State的唯一途径。
Action:业务代码、异步请求。
3、限制
角色不同,二者有不同的限制。
Mutation:必须同步执行。
Action:可以异步,但不能直接操作State。而且可以通过 action 来提交 mutations