Vue狀態管理vuex中mutations的用法

• store

  // store.js
      import Vue from "vue";
      import Vuex from "vuex";
  
      Vue.use(Vuex);
  
      // 使用常量替代 Mutation 事件類型
      const CONST_COMMIT_CHANGE_BUFF = "CONST_COMMIT_CHANGE_BUFF";
  
      export default new Vuex.Store({
          state: {
              userInof: {
                  token: "登陸憑證",
                  name: "魯班七號"
              }
              // buff: "帶藍buff的"
          },
          getters: {},
          mutations: {
              COMMIT_CHANGE_BUFF(state, obj) {
                  Vue.set(state, "buff", "帶藍buff的"); // 沒有在state初始化 buff，則使用 Vue.set()設置
                  state.buff = obj.buff;
              },
              [CONST_COMMIT_CHANGE_BUFF](state, obj) {
                  Vue.set(state, "buff", "帶藍buff的");
                  state.buff = obj.buff;
              }
          },
          actions: {},
          modules: {}
      });
  

• App.vue

  // App.vue
      <template>
          <div id="app">
              <p>{{ buff }} - {{ name }}</p>
              <div>
                  <button @click="change({ buff: '帶大龍buff的' })">
                      使用mapMutations輔助函數（對象形式）
                  </button>
              </div>
              <div>
                  <button @click="COMMIT_CHANGE_BUFF({ buff: '帶小龍buff的' })">
                      使用mapMutations輔助函數（數組形式）
                  </button>
              </div>
              <div>
                  <button @click="CONST_COMMIT_CHANGE_BUFF">
                      使用常量的形式提交
                  </button>
              </div>
              <div>
                  <button @click="chageBuff(1)">
                      使用字符串形式
                  </button>
              </div>
              <div>
                  <button @click="chageBuff(2)">
                      使用對象形式
                  </button>
              </div>
          </div>
      </template>
  
      <script>
      import { mapState, mapMutations } from "vuex";
      export default {
          computed: {
              ...mapState({
                  name: status => status.userInof.name,
                  buff: status => status.buff
              })
          },
          methods: {
              ...mapMutations({
                  change: "COMMIT_CHANGE_BUFF" //  將 `this.change()` 映射為 `this.$store.commit('COMMIT_CHANGE_BUFF')`
              }),
              ...mapMutations(["COMMIT_CHANGE_BUFF"]), // 將 `this.COMMIT_CHANGE_BUFF()` 映射為 `this.$store.commit('COMMIT_CHANGE_BUFF')`
              CONST_COMMIT_CHANGE_BUFF() {
                  this.$store.commit("CONST_COMMIT_CHANGE_BUFF", {
                      buff: "帶紅buff的"
                  });
              },
              CONST_COMMIT_CHANGE_BUFF() {
                  this.$store.commit("CONST_COMMIT_CHANGE_BUFF", {
                      buff: "帶紅buff的"
                  });
              },
              chageBuff(val) {
                  if (val === 1) {
                      this.$store.commit("COMMIT_CHANGE_BUFF", {
                          buff: "沒有buff的"
                      });
                  }
                  if (val === 2) {
                      this.$store.commit({
                          type: "COMMIT_CHANGE_BUFF",
                          buff: "有buff的"
                      });
                  }
              }
          }
      };
      </script>
  

vuex getters 參考：https://vuex.vuejs.org/zh/guide/mutations.html

Vue.set 參考：https://cn.vuejs.org/v2/api/#Vue-set