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