我们都知道 Vuex 是 Vue 开发中的一个插件. 它用于集中是的状态管理。说白了就是一个全局的提供了响应式的大单例对象。仅此而已。
由于 SPA 组件是基于模块化的组价开发.
组件间的组合是一个树形结构.
树形结构,就会存在组件间的几种关系.
- 父子
- 同级
- 间隔
麻烦的组件间数据传递，可以使用vuex作为一个对于Vuex本身来说非常懵逼的中间桥梁进行数据传递。
Vuex的四个组成部分.
- state 用于存放数据. 实际上它也被 Object.defineProperty 给代理成了
get/set - mutations 用于同步修改state数据.
- actions 用于异步操作,得到的最终结果,同步的使用 mutations 进行修改(对,state的官方非常建议使用mutations)
- getters 就不说了,我觉得这个玩意都可有可无....(我自己拿到state数据,自己filter,reduce都行,没有必要非要用这个)
官方建议
在官方的 Vuex 的 mutations 章节
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数.
说是:更改 Vuex 的 store 中的状态(state)的唯一方法是提价 mutations
但是,我们仍然可以在项目中可以通过 this.$store.state.x='xx' 的方式仍然可以修改数据.(本质上我们访问的是一个get/set).
那为什么官方就非要我们使用 mutations 呢?
好像是一种约定,我不这么用,仍然可以得到我想要的结果.为什么要用一些更加复杂的方式???
DEMO 界面
image.png
直接使用this.$store.state.x='xxx'的方式.
storeClickHanlder () {
console.log(`this.$store.state.count = 11111`)
this.$store.state.count = 11111
}
查看结果
image.png
没问题啊.也可以修改啊,那我偏不使用commit的方式,烦死人,写的太多了,也不直观.!!!!
但是当我们打开 Vuex 调试工具,选择 Vuex 选项卡.
image.png
就会发现,问题出来了.
我们在代码里肯定是成功的将 state.count 改成 11111 了.
但是在 Vue 的调试工具里,显示的 state 仍然是 1000.
这可以说是我们没有按照Vuex官方建议:使用唯一mutations去修改数据.
也可以理解为是: 官方并没有提供一个完好的无缺的调试工具.
使用 mutations 的 commit 去修改数据
commitClickHanlder () {
console.log('this.$store.commit("changeCount",22222)')
this.$store.commit('changeCount',Math.random() * 10000 % 10000)
}
查看结果:
通过官方强制要求,但代码中毫无约束的方式,利用 commit 去修改state,可以更好的去帮助 Vue 的调试工具,记录每一次的数据修改.并且点击每一次的修改项,可以返回到对应的结果显示.
既然,通过 this.$store.state.count 会影响后续的调试,如果官方这个功能非常重要的话,那么他们就应该强制的不能让我们使用第一种方式去修改state.起码应该有下列两个提示：
- 数据修改失败
- 控制台报出警告.
但什么都没有,我们仍然也可以修改数据成功.除了在Vuex看不到状态,不方便调试.(那我不需要调试呢?)
使用mutations的commit基本只能靠自觉.
最后想说:
也不一定非要按照官方建议使用mutations修改state.毕竟官方没有强制手段去约束.
但是还是建议使用 mutations 去修改(commit) state. 毕竟说不定你会用到 Vuex 在浏览器中的调试工具呢?
有时候，在一些框架里就是这些非常小位置恶心死你。不搞明白，心里总有一点恶心的感觉。
网友评论