vuex的修改状态的方式就简单多了，严格的说只有一个，另外还有一个间接的，一个属于漏洞。

直接修改，强烈不建议

因为vuex没有完全把state封装进去，又或者由于js太过开放，无法完全制止随意修改的行为，所以vuex干脆就没堵这个漏洞，只是看我们自觉了。

到处修改有哪些危害呢？

• 到处都有修改的地方，代码散乱不宜维护。
• 出问题的话，找不到到底在哪里改的。
• 多个计算属性里面修改state的话，容易造成死循环。
• 不乏“聪明人”总会弄出来你意想不到的方法。
• 其他

所以要统一修改，统一管理，这样不容易乱套。

mutations

这个是官方推荐的方法，其含义是“突变”，只能用这种方法来修改状态。
我们来写几个简单的例子

  mutations: {
    // 计数器
    setCount(state, num = 1) {
      state.count += num
    },
    // 设置当前时间
    setTime(state) {
      state.myObject.time = '现在时间：' + new Date()
    },
    // 设置数组的值
    setArray(state) {
      state.myArray[1] = 4
    }
  },

• 第一个参数
  固定为state，这是默认设置没法改的。

• 第二个参数，学名 载荷（Payload）
  这个是我们可以由外部传入的参数，如果我们需要传入多个参数的话，需要作出对象的形式。

使用方法也很简单：

 store.commit('setCount', val)

我们还是看看内部结构：

009突变.png

红框是我们调用 mutations 里面的事件的函数。
篮框是我们定义的 mutations 的各种事件。
桔色框是我们定义的state。

那么那个【f】是啥呢？我们再开一层

009突变11.png

反正不是正常的函数。

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

官方这么说的，我水平有限，大概涉及到了原型链那方面的了。

mutations 必须是同步操作

官网说，如果异步操作的话，devtool 会弄不清楚上下文，我也没搞懂。
反正需要异步的话，可以用action。就不纠结这个事情了。

使用常量代替字符串

mutations 的事件名称是字符串的形式，这个容易写错，那么怎么办呢？我们可以使用常量。

在单独文件里面定义

// mutation-types.js
export const Set_Count = 'set_count'

然后引入这个文件，并且定义事件

import { Set_Count, Set_Count_sy } from './mutation-types.js'

 mutations: {
    // 计数器
    setCount(state, num = 1) {
      state.count += num
    },
    [Set_Count](state, num = 1) {
      state.count += num
    },

调用

// 需要先引入 mutation-types.js

store.commit(Set_Count_sy)

这样你就可以，，，等等，我要是故意写错会给出提示吗？
这个，，，要看你用的编辑器是否支持了。至少我用的这个就没有啥提示，运行的时候，单击按钮才会保存，不执行到那一行，都不带出错的。so。。。

使用symbol

那么是否可以使用ES6新出的symbol呢？
我尝试了一下，报错了。
要么是我的代码有问题，要么是vuex的 mutations 不支持symbol。

010symbol.png

在线演示：

https://naturefwvue.github.io/nf-vue-cnd/cnd/project-vuex/

源码：

https://github.com/naturefwvue/nf-vue-cnd/tree/main/cnd/project-vuex