vuex的mutation和action的区别和使用

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 ：

const store = new Vuex.Store({state: {count: 0},mutations: {increment (state) {state.count++}},actions: {increment (context) {    //官方给出的指定对象, 此处context可以理解为store对象context.commit('increment');}}
})

actions的不同写法

// 第一种写法简写形式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