vuex 中輔助函數mapGetters的基本用法詳解
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" // 對象形式下 改變映射 }),
到此這篇關於vuex 中輔助函數mapGetters的基本用法詳解的文章就介紹到這瞭,更多相關vuex mapGetters使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vuex總體案例詳解
- Vue詳細講解Vuex狀態管理的實現
- Vuex如何獲取getter對象中的值(包括module中的getter)
- vue3.0如何使用computed來獲取vuex裡數據
- vuex中Getter的用法詳解