vuex中store 的mutation

1.mutation

官方解释mutation：

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

官方是建议我们通过mutation来实现更改store中的state的数据，而非在组件中直接使用 $s t o r e . s t a t e . d a t a = x x x 来直接进行更改。通过 m u t a t i o n 来更改数据的操作会被捕获到，而直接使用$ store.state.data=xxx这种方式更的数据是无法被捕获的，如果发生错误，将无法定位到是哪个组件的操作导致错误发生，所以官方说更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

图示：

上网找到一个很不错的图
在这里插入图片描述

流程：

绕过Actions（mutation必须是同步操作，Devtools才能追踪变量）

用户触发事件
在事件处理中通过commit()提交对应的mutation
mutation中对state进行修改
state修改后响应系统更新视图

不绕过Actions（Action 可以包含任意异步操作）

用户触发事件
在事件处理中通过dispatch()提交对应的Actions
在Actions中通过commit()提交对应的mutation
mutation中对state进行修改
state修改后响应系统更新视图

解析：

当我们只有同步操作的时候，官方允许我们在组件中直接提交mutation，而不经过Actions，但是如果我们的操作包含异步操作的时候，我们必须通过Actions来异步提交mutation，从而实现异步操作，这样才能让Devtools可以捕获变量更改。

2.初次使用

const store = new Vuex.Store({
    
    
  state: {
    
    
    count: 1
  },
  mutations: {
    
    
    increment (state) {
    
    
      // 变更状态
      state.count++
    },
    incrementNum (state,num) {
    
    
      // 通过提交载荷传递过来的num
      state.count+=num
    }
  }
})


//在组件中定义一个方法通过$store.commit('increment')来进行提交
methods:{
    
    
    increment(){
    
    
        this.$store.commit('increment')
    },
    incrementNum(num){
    
    
        this.$store.commit('increment',num)
    } 
}

3.提交载荷

mutations接受commit传递过来的参数，这个参数叫做payload（提交载荷），我们可以通过payload来实现数据的传递。

mutations: {
    
    
  increment (state, payload) {
    
    
    state.count += payload.amount
  }
}

store.commit('increment', {
    
    
  amount: 10
})

4.对象风格的提交方式

store.commit()提供了另一种提交风格，store.commit()允许以对象的风格进行提交，这个风格跟vue很切合，对象声明形式。

store.commit({
    
    
  type: 'increment',       //对应commit第一个参数，也就是事件类型
  amount: 10			//传递的参数payload
})

使用

mutations: {
    
    
  increment (state, payload) {
    
        //对象提交方式，payload是提交载荷
    state.count += payload.amount
  }
}

5.Mutation 需遵守 Vue 的响应规则

Vuex 的 store 中的状态是响应式的，所以Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项。

添加操作

//错误的示范
state.info['address']='北京'


//正确的示范
Vue.set(state.info,'address','北京')
//vue官方说以新对象替换老对象是遵守 Vue 的响应规则
//响应系统能捕获全新的对象数据
state.info = {
    
    //一个全新的对象}

第一个示范虽然是给state中的info添加了一个key value，但是这种添加操作是绕过了vue的响应式系统的，所以vue并没有将新添加的key value追加到响应系统里面，所以视图是不会动态跟新新添加的数据。

而第二种示范，是通过vue的响应式系统进行变量的追加，所以vue能监控到变量的变化，从而对视图做出响应和跟新。

删除操作

删除操作同理

Vue.delete(state.info,'address')

6.用常量替代Mutation事件类型

从上面的代码可以看出，我在使用store.commit的时候后面都是通过字符串的形式来指定commit的mutation。而官方建议是将这种mutation 事件类型进行一个抽离，将这些mutation的名字定义到一个专门保存的单独文件种，这样做抽离，使得整个APP的mutatio易于管理，也使得项目结构清晰。

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

官方建议的操作如下：

先将创建一个mutation-types.js，里面存储定义的mutation 事件类型

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
//定义什么mutation，先将事件类型（名字）写这里

使用的时候

// store.js
import Vuex from 'vuex'
import {
    
     SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
    
    
  state: {
    
     ... },
  mutations: {
    
    
    /*
    	官方是用这种风格来命名的：
    	[SOME_MUTATION] (state) {} 
    	---等价转变--->SOME_MUTATION(state) {}
    */
      // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
    
    
      // mutate state
    }
  }
})
    
    
//其他组件commit时
import {
    
     SOME_MUTATION } from './mutation-types'
                             ...
store.commit(SOME_MUTATION)

7.Mutation 必须是同步函数

官方是这样解释的：

一条重要的原则就是要记住 mutation 必须是同步函数。为什么？请参考下面的例子：

mutations: {
    
    
  someMutation (state) {
    
    
    api.callAsyncMethod(() => {
    
    
      state.count++
    })
  }
}

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

所以我们为了能够实现异步操作，我们需要借助Actions来实现，在Actions通过异步提交 mutation从而实现异步操作，Action 可以包含任意异步操作，Action 提交的是 mutation，而不是直接变更状态。