vuex 辅助函数mapGetters基本用法

mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性，在组件或界面中不使用mapGetter调用映射vuex中的getter，在组件或界面中使用mapGetter调用映射vuex中的getter

mapGetters辅助函数

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

1、在组件中不使用mapGetter函数钩子的方式

1.1 调用映射根部store中的getter

关键词：
this.$store

<!-- 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); // 2state.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基本用法相关推荐

Vue进阶（幺肆捌）：Vuex 辅助函数详解
文章目录一.前言二.辅助函数三.如何使用辅助函数四.辅助函数如何去映射 vuex.store 中的属性 4.1 mapState: 把 state 属性映射到 computed 身上 4.2 ...
Vuex中mutations的用法
Vuex中mutations的用法在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是 ...
vuex使用mapgetters
vuex使用mapgetters 首先使用vuex 首先使用vuex 这是index.js文件 import {createStore} from 'vuex' import getters from ...
vuex中mapGetters
vuex为了更快捷解决组件之间相互传值问题不划分模块结构目录 index.js: import Vue from 'vue' import Vuex from 'vuex' import r ...
vue——vuex mapState,mapGetters,mapMutations,mapActions
当多次获取state中的数据时会出现大量的 $store.state.属性名造成代码的冗余同时也很麻烦.就可使用 mapState(引用时使用的名称,'state中的属性名') 或 mapState ...
vuex辅助函数和vuex5个属性
在上篇中,我们可以知道如果想要访问vuex.store中state中的数据,需要this.$store.state.属性名.显然这样访问数据写的代码很很不简洁的,辅助函数就是用来解决这个问题的. 1. ...
vuex概念之Getter用法详解
Vuex 允许我们在 store 中定义"getter"(可以认为是 store 的计算属性).就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值 ...
vuex当中mapGetters使用
<template><div id="app">{{count}}{{name}}<button @click="changeNameFun ...
vuex中mapGetters,mapActions使用
vuex运行流程图如下 1.Vue Components 是我们的 vue 组件,组件会触发(dispatch)一些事件或动作,也就是图中的 Actions 2.我们在组件中发出的动作,肯定是想获取或 ...

vuex 辅助函数mapGetters基本用法

1、在组件中不使用mapGetter函数钩子的方式

1.1 调用映射根部store中的getter

1.2 调用映射modules模块store中的getter函数

2、在组件使用mapGetter钩子调用vuex中的getter函数

2.1 调用映射根部store中的getter

2.2 调用映射根部store中的getter

vuex 辅助函数mapGetters基本用法相关推荐

最新文章

热门文章