辅助函数...mapGetters

...mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

例：页面中组件中调用映射根部store中的getter。

store.js

/**
 * store.js
 */
 import Vue from 'vue'
 import Vuex from 'vuex'
 
 Vue.use(Vuex)
 export default new Vuex.Store({
   state: {
     stateHello: 1
   },
   getters: {
     gettersHello: (state) => {
       return state.stateHello * 2
     }
   },
   mutations: {
     mutationsHello(state, val) {
       state.stateHello += val
     }
   },
 })

Test.vue

<!-- Test.vue -->
<template>
  <div class="vuexReponse">
    <div @click="changeVal">点击</div>
    <div>stateHello： {{stateHello}}</div>
    <div>gettersHello： {{gettersHello}}</div>
    <div>gettersHelloOther {{gettersHelloOther}}</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "vuexReponse",
  components: {

  },
  data() {
    return {

    }
  },
  watch: {
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.stateHello
    },
    ...mapGetters(["gettersHello"]), // 数组形式
    ...mapGetters({   // 对象形式 
      gettersHello: "gettersHello"
    }),
    ...mapGetters({
      gettersHelloOther: "gettersHello" // 对象形式下 改变映射
    }),
  },
  methods: {
    changeVal() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</script>