一.項目中的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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！