vuex学习与实践三——mutation

1、关于mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation，每个 mutation 都有一个事件类型和 一个回调函数。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，代码如下：
store.js：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state, obj) {
      state.count ++;
    },
    reduction(state, obj) {
      state.count --;
    }
  }
});
export default store;

组件中应用：

<template>
  <div id="salary-list-second">
    <button @click="incrementFun">+</button>
    <button @click="reductionFun">-</button>
    <p>{{currentCount}}</p>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "salary-list-second",
  computed: mapState({
    currentCount: state => state.count
  }),
  methods: {
    incrementFun() {
      this.$store.commit("increment");
    },
    reductionFun() {
      this.$store.commit("reduction");
    }
  }
};
</script>
<style>
button {
  padding: 0.2rem;
}
p {
  line-height: 0.5rem;
}
</style>