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使用内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码！
