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

一.项目中的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的底层中也是使用这样相似的原理，这样看上去是否是简单不少。--------------------- 做者：丶叶修 来源：CSDN 原文：https://blog.csdn.net/qq_40701490/article/details/88794555 版权声明：本文为博主原创文章，转载请附上博文连接！