调用Mutation函数的方式

调用Mutation函数的方式

第一种：this.$store.commit()

// 触发mutation
methods: {
    handle1() {
        //触发mutations的第一种方式
        this.$store.commit ( 'add ' )
    }
}

可以在触发mutations 时传递参数:

//定义Mutation
const store = new vuex.store({
    state: {
	count: 0,
    },
    mutations: {
        addN (state, step){
            //变更状态
        	state.count += step
        }
	}
})

第二种：将指定的 mutations函数，映射为当前组件的methods函数

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

// 1．从vuex中按需导入mapMutations函数
import ( mapMutations ] from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法:

// 2．将指定的 mutations函数，映射为当前组件的methods函数
methods : {
...mapMutations ( [ 'sub', 'subN' ])

}

减法计算器应用实例

减法计算器示例：

<template>
  <div>
    <!-- 访问共享数据count {{ count }} -->
    <h3>当前最新的count值为：{{ count }}</h3>
    <button @click="btnhandler1">-1</button>
    <button @click="btnhandler2">-N</button>
  </div>
</template>

<script>
// 1.从 vuex中按需导入mapstate函数
import { mapState, mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  //   2.将全局数据，映射为当前组件的计算属性
  computed: {
    ...mapState(['count']),
  },
  methods: {
    //  把store中的sub函数 映射为当前组件的mutations
    ...mapMutations(['sub', 'subN']),
    btnhandler1() {
      this.sub()
    },
    btnhandler2() {
      this.subN(3)
    },
  },
}
</script>