mutation的类型

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--
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,978评论 0 7
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,496评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,179评论 0 6
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,704评论 7 61
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,082评论 4 111