vue相关

mutation的类型

2017-04-26  本文已影响6人  乖乖果效36

vuex的文档,我反反复复,在不同的时期读了很多遍,每一遍都会有一些不同的理解,开始读一下,可以写一些简单的项目,但是总是知其然而不知其所以然的样子,可以做出一些功能,但是很多细节不清楚为什么那么些,终于,要改一些东西的时候,还是躲不掉,比如说,在mutation和action这里,总是有一些纠结的点,读不懂,比如说对于mutation的类型,翻遍各种资料,终于明白了。

这里我们可以举一个简单的项目作为例子,当点击+1按钮的时候,count 加1,点击-1按钮的时候,count 减1.

mutation

The only way to actually change state in a Vuex store is by committing a mutation, 在vue 中,只有mutation 才能改变state. mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去comit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,commit mutation 之后, 要做什么事情,那就需要给它指定一个处理函数, 类型(名字) + 处理函数就构成了mutation. 现在store.js添加mutation.

const store = new Vuex.Store({ 
  state: {
    count:0
 },
  mutations: { 
    // 加1
    increment(state) {
    state.count++;
    }, 
    // 减1 
    decrement(state) {
    state.count--
   }
  }
})

Vue 建议我们mutation 类型用大写常量表示,修改一下,把mutation 类型改为大写

mutations: { 
  // 加1
 INCREMENT(state) {
   state.count++; 
  }, 
  // 减1
  DECREMENT(state) {
   state.count--
  }
}
上一篇下一篇

猜你喜欢

热点阅读