首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vuex中mapGetters的使用及简单实现原理

vuex中mapGetters的使用及简单实现原理

作者头像
庞小明
发布2019-07-27 18:21:43
5K0
发布2019-07-27 18:21:43
举报
文章被收录于专栏:pangguomingpangguoming

一.项目中的mapGetters 在Vue项目的开发过程中必然会使用到vuex,对vue项目公用数据进行管理,从而解决组件之间数据相互通信的问题,如果不使用vuex,那么一些非父子组件之间的数据通信将会变得极为繁琐。

1.这里首先说下项目中mapGetters的使用 先看下store部分目录结构

index.js文件

import Vue from 'vue' import Vuex from 'vuex' import book from './mudules/book' import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({ modules: { book }, getters }) book.js文件

const book = { state: { number: 1 }, mutations: { SET_NUMBER: (state, number) => { state.number = number } }, actions: { setNumber: ({commit, state}, number) => { // console.log(state.number, number) return commit('SET_NUMBER', number) } } }

export default book getters文件

const getters = { number: state => state.book.number }

export default getters 在vue组件中

import { mapGetters } from 'vuex' export default { computed: { ...mapGetters(['number']), }, mounted () { this.$store.dispatch('setNumber',10).then(() => { console.log(this.number) }) } } 通过引入mapGetters 我们就可以轻松的取到vuex中存储的数据,从代码中可以看出,getters就类似于vue组件中的computed(计算属性),在组件中引入mapGetters就是将vuex中的数据映射到组件的计算属性当中,在组件不多,组件的数据通信不是很多的时候这样写看似将简单的东西复杂化了,但是在稍复杂点的项目中这样会极大的减少工作量,及组件之间数据传递的复杂程度。

2.mapGetters简单实现原理 在上面的代码中可能很多人在项目中用到过,但是对于其原理可能不是很理解。 可能有一部人对于在组件计算属性中…mapGetters([‘number’]),不是很理解,下面就简单写一个方法实现类似的功能。

在组件中

import { mapGetters } from 'vuex' export default { computed: { ...mapGetters(['number']), //...fn(['a', 'b', 'c']) //需要实现这样一个方法传入一个数组 }, methods: { menuClick (key) { if (key === 0) { this.$router.push('/ebook') }else if (key === 1) { this.$router.push('/datachart') }else{ return } } }, mounted () { this.$store.dispatch('setNumber',10).then(() => { console.log(this.number) }) // console.log(this.a,this.b,this.c) // 在组件中可以直接通过this取到相应的值 } } 我们在计算属性中添加 …fn([‘a’, ‘b’])

要求在组件中可以直接通过 this.a 和this.b 取到相应的值

const getters = { a: () => 1, b: () => 2, c: () => 3 } function fn (keys) { const data = {} keys.forEach(key => { if (getters.hasOwnProperty(key)) { data[key] = getters[key] } }); return data } import { mapGetters } from 'vuex' export default { computed: { ...mapGetters(['number']), ...fn(['a', 'b', 'c']) }, mounted () { this.$store.dispatch('setNumber',10).then(() => { console.log(this.number) }) console.log(this.a,this.b,this.c) } } 打印结果为1,2,3 方法getters就类似于vuex中getters, 方法fn与vuex中的mapGetters有着相似的功能,其实在vuex的底层中也是使用这样类似的原理,这样看上去是不是简单很多。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-07-24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档