使用通用vuex突变

时间:2018-12-27 22:15:44

标签: javascript vue.js vuex state-management

我在vue / vuex中工作了大约一年。在我的应用中,发现自己最终像这样在我的商店中添加了两个变子

mutations: {
...
setAny(state, obj){
  Object.keys(obj).forEach(k => state[k] = obj[k]);
},
toggleAny(state, key){//booleans
  state[key] = !state[key];
}
...

然后我可以使用以下模式快速获取处于状态的对象或多个对象:

actions:{
  myAsyncThing:({commit}) => {
    asyncThing.then(results => {
      const foo = specialSauceA(results);
      const bar = specialSauceB(foo);
      const baz = specialSauceC(bar);
      commit('setAny', {foo, bar, baz});//slick one liner!
    });
  },
  ...
},
state:{
  foo:{},
  bar:{},
  baz:{}
},

相对于为我可能更新的每个共享状态键编写一个mutator,我更喜欢这样做。当然,我也写了很多自定义变量,但是当我需要向需要可靠地反应并从动作或组件设置的状态添加道具时,我一直倾向于这种方法。

我问的原因主要是我想知道为什么我从未见过这样做的vuex代码示例,我想知道为什么不呢?当我第一次这样做时,我感到很顽皮,但是随着时间的流逝,这种模式已经节省了很多时间,并且没有真正的副作用。

鉴于围绕将状态突变从动作分解为突变的讨论,这种方法是否存在缺陷?

1 个答案:

答案 0 :(得分:2)

我认为您的方法还可以。因为有时会有如此多的带有突变的双码。如果您在https://github.com/vuejs/roadmap中看到Vuex 4.x,则它具有

  

摆脱了将动作和突变分开的需求

这意味着您要迈出的一步