mapGetters輔助函式

mapGetters輔助函式僅僅是將 store 中的 getter 對映到區域性計算屬性：

1、在元件或介面中不使用mapGetter呼叫對映vuex中的getter

　　1.1 呼叫對映根部store中的getter

<!-- test.vue -->
<template>
  <div class="vuexReponse">
    <div @click="changeVal">點選</div>
    <div>"stateHello： "{{stateHello}}</div>
    <div>"
 
gettersHello： "{{gettersHello}}</div>
  </div>
</template>
<script>
export default {
  watch: {
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      
 
return this.$store.state.stateHello
    },
    gettersHello() {
      return this.$store.getters.gettersHello
    }
  },
  methods: {
    changeVal() {
      this.$store.commit("mutationsHello", 2)
    }
  }
}
</script>

/**
 * 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) {
      console.log("val", val); // 2
      state.stateHello += val
    }
  },
})

　　流程： 在test.vue 介面中點選呼叫changeVal(), changeVal方法通過commite 傳參val 並呼叫 store.js中的mutationsHello() 方法，mutationsHello方法修改state中的stateHello的值，在getters 的 gettersHello 中監聽stateHello的值，stateHello的值的改變觸發了gettersHello，在test.vue介面computed 中計算了 store.getters.gettersHello ,這個就將gettersHello 對映到 store.gettes.gettersHello 的值，通過模板 將gettersHello 渲染到dom中，同時由於gettersHello 的改變也能觸發watch中gettersHello，實現對store.getters.gettersHello 資料改變的監聽。

　　1.2 呼叫對映modules模組store中的getter

<!-- moduleTest.vue -->
<template>
  <div class="vuexReponse">
    <div @click="changeVal">點選</div>
    <div>stateHello： {{stateHello}}</div>
    <div>gettersHello： {{gettersHello}}</div>
  </div>
</template>

<script>
export default {
  watch: {
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.vuexTest.stateHello
    },
    gettersHello() {
      return this.$store.getters['vuexTest/gettersHello']
    }
  },
  methods: {
    changeVal() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</script>

/**
 * 模組 vuexTest.js
 */
export default {
    namespaced: true,
    state: {
        stateHello: 1,
    },
    getters: {
        gettersHello: (state, getters, rootState, rootGetters) => {
            console.log("state", state);
            console.log("getters", getters);
            console.log("rootState", rootState);
            console.log("rootGetters", rootGetters);
            return state.stateHello * 2
        }
    },
    mutations: {
        mutationsHello(state, val) {
            console.log("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    actions: {

    }
}

　　需要注意的地方是在 computed 中計算對映 模組中的getters 的方法時 呼叫方式與 獲取模組中的state 中的資料不同

this.$store.getters['vuexTest/gettersHello']

2、在元件或介面中使用mapGetter呼叫對映vuex中的getter

　　2.1 呼叫對映根部store中的getter

/**
 * 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 -->
<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>

　　2.2 呼叫對映根部store中的getter

/**
 * vuexTest.js
 */
 export default {
    namespaced: true,
    state: {
        stateHello: 1,
    },
    getters: {
        gettersHello: (state, getters, rootState, rootGetters) => {
            console.log("state", state);
            console.log("getters", getters);
            console.log("rootState", rootState);
            console.log("rootGetters", rootGetters);
            return state.stateHello * 2
        }
    },
    mutations: {
        mutationsHello(state, val) {
            console.log("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    actions: {

    }
}

<!-- module 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",
  watch: {
    gettersHello(newVal, oldVal) {
      console.log("gettersHello newVal", newVal);
      console.log("gettersHello oldVal", oldVal);
    }
  },
  computed: {
    stateHello() {
      return this.$store.state.vuexTest.stateHello
    },
    ...mapGetters(["vuexTest/gettersHello"]), // 陣列形式
    ...mapGetters("vuexTest", {   // 物件形式 
      gettersHello: "gettersHello"
    }),
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // 物件形式下 改變對映
    }),
  },
  methods: {
    changeVal() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }
}
</script>

這三種形式
　　...mapGetters(["vuexTest/gettersHello"]), // 陣列形式
    ...mapGetters("vuexTest", {   // 物件形式 
      gettersHello: "gettersHello"
    }),
    ...mapGetters("vuexTest", {
      gettersHelloOther: "gettersHello" // 物件形式下 改變對映
    }),