vuex中store 的mutation

vuex中store 的mutation

1.mutation

官方解释mutation：

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

官方是建议我们通过mutation来实现更改store中的state的数据，而非在组件中直接使用$store.state.data=xxx来直接进行更改。通过mutation来更改数据的操作会被捕获到，而直接使用$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) {// 通过提交载荷传递过来的numstate.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，而不是直接变更状态。

总结

以上是生活随笔为你收集整理的vuex中store 的mutation的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。