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 版權聲明：本文爲博主原創文章，轉載請附上博文連接！