Vuex直接修改state与用commit修改state的区别

一. 使用vuex修改state时，有两种方式：

1. 可以直接使用 this.$store.state.变量 = xxx;
2. this.$store.dispatch('action中的方法名', payload) 或者 this.$store.commit('mutations中的方法名', payload)

但是官方文档中有这么一句话：

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

二. 异同点

1. 共同点： 能够修改 state 里的变量，并且是响应式的（能触发视图更新）
2. 不同点：若将 vue 创建 store 的时候传入 strict: true, 开启严格模式，那么任何修改 state 的操作，只要不经过 mutation 的函数，vue 就会throw error :[vuex] Do not mutate vuex store state outside mutation handlers。

在vuex官方文档上看到了关于严格模式的描述：

开启严格模式，仅需在创建 store 的时候传入 strict: true；

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

三.使用commit修改state的优点：

vuex 能够记录每一次 state 的变化记录，保存状态快照，实现时间漫游／回滚之类的操作。（实际本人未用到，暂时未遇到使用该特性的需求）