vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
类别:编程学习 浏览量:2067
时间:2021-10-12 00:52:27 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使用内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
标签:vuex mapGetters
您可能感兴趣
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vuex原理及使用方法(Vuex状态机的快速了解与实例应用)
- vuex数据持续化(Vuex数据持久化实现的思路与代码)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- Google 推出了一个游戏生成器,让不会编程的你也能自己设计游戏(推出了一个游戏生成器)
- 二胎家庭老大爱闹情绪,用这招很有效(二胎家庭老大爱闹情绪)
- 一个30岁男人外遇失败的全过程(一个30岁男人外遇失败的全过程)
- 《无敌破坏王2》 不聊彩蛋,聊聊我从动画里看到的现实那些事儿(无敌破坏王2不聊彩蛋)
- 《寄生虫》 三观不正 人类悲欢从来不相通,感同身受也并非本能(寄生虫三观不正)
- 这部动漫中的女孩子,可比101女孩更加励志(这部动漫中的女孩子)
热门推荐
- 如何在新公司建立良好形象
- iis服务器如何设置多个网站(云服务器怎么设置404页面IIS7)
- 面试时如何向公司提问
- sql怎么写递归(sql server实现递归查询的方法示例)
- 云服务器租用的因素(云服务器租用都需要注意什么?如何选择好的云服务器商?)
- docker-compose 如何启动(docker compose部署主从复制的实现)
- linq中let
- antdesignpro引入依赖如何使用(在Ant Design Pro登录功能中集成图形验证码组件的方法步骤)
- pandas如何删除索引列(pandas DataFrame 删除重复的行的实现方法)
- dedecms有哪些功能(织梦DedeCMS v5.7全文检索使用说明sphinx)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9