关于 Vuex 一个比较无聊的点.

我们都知道 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 在浏览器中的调试工具呢?

有时候，在一些框架里就是这些非常小位置恶心死你。不搞明白，心里总有一点恶心的感觉。

码云地址

关于 Vuex 一个比较无聊的点.