VUEX 使用学习三 : mutations

转载请注明出处:

  在 Vuex 中 store 数据改变的唯一方法就是提交 mutationsmutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离。

  通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化

  示例:

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
     // 事件类型 type 为 increment
    increment (state) { 
      // 变更状态
      state.count++
    }
  }
})

 

第一种使用方式:

  this.$store.commit() 是触发mutations的第一种方式,

  示例:

// 方法
mutations:{
  // 加的方法
  increment(state,addcounter){
    state.counter += addcounter
  },
  // 减的方法
  decrement(state,subcounter){
    state.counter -= subcounter
  }
},

  使用:



第二种方式 mapMutations

  通过以函数映射的方式

    1.从vuex中按需求导入mapMutations 函数

import {mapMutations} from 'vuex'

    通过刚才导入的mapMutations函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性

    2. 将指定的mutations函数,映射为当前组件的methods函数

methods:{ ...mapMutations(['add']) }

    示例:

 

文章来源于互联网:VUEX 使用学习三 : mutations

THE END
分享
二维码