vue中的mapgetter优势
vuex 中辅助函数mapGetters的基本用法详解mapGetters辅助函数
mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：
1.1 调用映射根部store中的getter
<!-- test.vue -->
<template>
<li class="vuexReponse">
<li @click="changeVal">点击</li>
<li>"stateHello： "{{stateHello}}</li>
<li>"gettersHello： "{{gettersHello}}</li>
</li>
</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>
<li class="vuexReponse">
<li @click="changeVal">点击</li>
<li>stateHello： {{stateHello}}</li>
<li>gettersHello： {{gettersHello}}</li>
</li>
</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.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>
<li class="vuexReponse">
<li @click="changeVal">点击</li>
<li>stateHello： {{stateHello}}</li>
<li>gettersHello： {{gettersHello}}</li>
<li>gettersHelloOther {{gettersHelloOther}}</li>
</li>
</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>
<li class="vuexReponse">
<li @click="changeVal">点击</li>
<li>stateHello： {{stateHello}}</li>
<li>gettersHello： {{gettersHello}}</li>
<li>gettersHelloOther {{gettersHelloOther}}</li>
</li>
</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使用内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网！