vuex中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
newvuex.store(,
getters
})

book.js檔案

const book =
,  mutations:},
actions:
, number)
=>}}
export
default book

getters檔案

const getters =
export
default getters

在vue元件中

import
from
'vuex'
export
default
，    mounted())}}

通過引入mapgetters 我們就可以輕鬆的取到vuex中儲存的資料，從**中可以看出，getters就類似於vue元件中的computed（計算屬性），在元件中引入mapgetters就是將vuex中的資料對映到元件的計算屬性當中，在元件不多，元件的資料通訊不是很多的時候這樣寫看似將簡單的東西複雜化了，但是在稍複雜點的專案中這樣會極大的減少工作量，及元件之間資料傳遞的複雜程度。

在上面的**中可能很多人在專案中用到過，但是對於其原理可能不是很理解。

可能有一部人對於在元件計算屬性中…mapgetters([『number』]),不是很理解，下面就簡單寫乙個方法實現類似的功能。

在元件中

import
from
'vuex'
export
default
,    methods:
else
if(key ===1)
else}}
,mounted()
)// console.log(this.a,this.b,this.c)  // 在元件中可以直接通過this取到相應的值
}}

我們在計算屬性中新增

…fn([『a』, 『b』])

要求在元件中可以直接通過

this.a 和this.b 取到相應的值

const getters =
function
fn(keys)
keys.
foreach
(key =>})
;return data
}import
from
'vuex'
export
default
,mounted()
)      console.
log(
this
.a,this
.b,this
.c)}
}

列印結果為1，2，3

方法getters就類似於vuex中getters，

方法fn與vuex中的mapgetters有著相似的功能，其實在vuex的底層中也是使用這樣類似的原理，這樣看上去是不是簡單很多。

注：（...）是es6新增語法展開運算子，大體有兩個主要功能，收集引數與將陣列表示式或者string在語法層面展開。這裡不做過多介紹

記一次vuex的mapGetters無效原因

報錯是 error during evaluation 見下圖。大概是下面這樣，import store from store.js computed 然後就是在vue devtools面板裡看到這樣的報錯然而另乙個屬性a，是有正確的值的。後來下斷點看報錯，發現了問題。this.store是und...

用mapGetters簡化模板寫法

如果你在寫vuex 發現getter寫成所謂下面的形式 computed 你是否覺得麻煩，波利亞曾經就說過一句名言你是否能用不同方式匯出結果，他言外之意就是你有沒有更簡單的解法，用在前端寫上就是，你是否能用不同風格寫出相同的效果。我在這裡簡要的為大家介紹與mapstate,mapmutatio...

Vuex中的模組

如果使用子模組中的state 就要寫 this.store.state.模組名.子模組的屬性如果是子模組中的getter this.store.getter.getter屬性名根模組中的getter有兩個引數 state,getter 子模組中的getter可以有三個引數分別是 state,ge...

vuex中mapGetters的使用及簡單實現原理

記一次vuex的mapGetters無效原因

用mapGetters簡化模板寫法

Vuex中的模組

相關推薦