Vue狀態管理vuex中getters的用法

• store

  // store.js
      import Vue from "vue";
      import Vuex from "vuex";
  
      Vue.use(Vuex);
  
      export default new Vuex.Store({
          state: {
              userInof: {
                  token: "登陸憑證",
                  name: "魯班七號"
              },
              buff: "帶藍buff的"
          },
          getters: {  // 可以認為是 store 的計算屬性
              name(state) {
                  return state.userInof.name;
              },
              nameBuff(state, getters) {  // Getter 也可以接受其他 getter 作為第二個參數
                  return state.buff + getters.name;
              }
          },
          mutations: {},
          actions: {},
          modules: {}
      });
  

• App.vue

      <template>
          <div id="app">
              <p>{{ $store.getters.name }}</p>
              <p>{{ $store.getters.nameBuff }}</p>
              <p>{{ name }}</p>
              <p>{{ nameBuff }}</p>
              <p>{{ nameBuff_2 }}</p>
          </div>
      </template>
  
      <script>
      import { mapGetters } from "vuex";
      export default {
          computed: {
              ...mapGetters({
                  name: "name" // 使用對象展開運算符將 getter 混入 computed 對象中 對象模式
              }),
              ...mapGetters(["nameBuff"]),  //  數組模式
              nameBuff_2() {
                  return this.$store.getters.nameBuff;
              }
          }
      };
      </script>
  

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