上一章講了state的相關內容,若是說state對應vue中的data的話,那麼getters就至關於vue中的computed,本章來詳細瞭解下vuex的getters屬性。javascript
Vuex提供了state這樣的狀態統一管理樹,你能夠在vue中用computed計算屬性接收這些公共狀態,以便使用,固然你也能夠在接收原值的基礎上對這個值作出一些改造,如 html
computed:{
sex:function(){
return this.$store.state.sex + '加個字符串,算是改造'
}
}
複製代碼
可是若是你的其餘組件也要使用這種改造方式去改造這個值,那你可能不得不去複製粘貼這個函數到別的組件中,固然,爲了解決這個問題,vuex自己就提供了相似於計算屬性的方式,getters可讓你從store的state中派生出一些新的狀態,固然若是不是多個組件要用到這個狀態,或者說每一個子組件用到的派生屬性不同,那麼,你徹底能夠不用getters.(這裏多說一句吧,vuex的出現是爲了解決組件間的通訊問題,若是你的操做或者數據不涉及到公共操做,只是單一組件操做,請務必不要把這些狀態值或者function存儲到vuex中,由於vuex會把自身掛載到全部組件上,無論當前組件是否用到裏面的東西,所以這事實上確定增長了性能的損耗,注意是確定,由於你很難保證每一個子組件都用到同一個狀態,除非是路由這樣的特殊狀態,固然路由的事情也無需歸vuex管理,在後面vue-router系列中會講到.) vue
Vuex 容許咱們在 store 中定義「getter」(能夠認爲是store的計算屬性)。就像計算屬性同樣,getter的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變纔會被從新計算。說白了就是vue的computed,若是你瞭解computed的話,那你能夠像使用computed同樣去使用getters,固然仍是有點區別的. java
//state.js
let state = {
from: 'china',
arr: [2, 3, 1, 4, 6]
}
export default state
複製代碼
// getters.js
// 第一個參數是state
let address = (state) => {
return '國籍:' + state.from
}
// 第二個參數能夠訪問getters
let addressMore = (state, getters) => {
return '其餘描述' + getters.address
}
// return 一個function,這個function能夠傳參,固然這個function最後會返回一個具體的數值
//本例中這個方法用於查詢state中的arr數組是否存在某個值
let findArr = (state) => (number) => {
let ifExit = state.arr.find((n) => n === number) // arr.find是ES6語法中數組的擴展
if (typeof (ifExit) === 'undefined') {
return false
} else {
return true
}
}
export {address, addressMore, findArr}
複製代碼
關於getters如何使用,能夠看一下上面代碼的註釋,這裏我重點介紹一下getters和computed的不一樣,就是上面的第三種用法,我以後會在vue進階系列中探討computed,filters兩種數據處理工具的侷限性,有興趣的也能夠直接點擊下面連接: vue-router
computed,filters兩種數據處理工具的侷限性vuex
computed的一個缺點就是不能傳參,假設你要去判斷一個數組裏是否存在某個值,那你無法將某個值傳到computed中去,這實際上是一個很蛋疼的事情,固然你能夠經過某些特殊手段,這裏我不展開,有興趣的能夠留言.而getters則沒有這個煩惱,有些對ES6語法使用較爲吃力的同窗能夠看下面的簡易版本,來看看findArr究竟作了什麼. 數組
let findArr = function(state){
// 返回一個匿名函數
return function(number){
// 若是有相同的則返回n,若是找不到則返回undefined
let ifExit = state.arr.find(function(n){
return n===number
})
if (typeof (ifExit) === 'undefined') {
return false
} else {
return true
}
}
}
複製代碼
最後咱們在子組件中展現一下效果 緩存
<template>
<div>
<div>{{from}}</div>
<div>{{from2}}</div>
</div>
</template>
<script> // import { mapGetters } from 'vuex' export default { computed: { from: function () { return this.$store.getters.address }, from2: function () { return this.$store.getters.addressMore } }, created () { console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>
複製代碼
結果以下所示: 函數
關於輔助函數的使用和對象展開符的使用我在本系列的第二章中已經說的很明白了,有興趣的能夠看一下下面的文章。 工具
Vuex入門(2)—— state,mapState,...mapState對象展開符詳解
<template>
<div>
<div>{{from}}</div>
<div>{{from2}}</div>
</div>
</template>
<script> import { mapGetters } from 'vuex' export default { computed: mapGetters({ 'from': 'address', 'from2': 'addressMore', 'find': 'findArr' }), created () { console.log(this.find(1)) // 因爲getters已經經過computed掛載到當前實例,因此你不須要再經過this.$store.getters的方法去訪問 console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>
複製代碼
<template>
<div>
<div>{{from}}</div>
<div>{{from2}}</div>
</div>
</template>
<script> import { mapGetters } from 'vuex' export default { computed: { ...mapGetters({ 'from': 'address', 'from2': 'addressMore', 'find': 'findArr' }) }, created () { console.log(this.find(1)) // 因爲getters已經經過computed掛載到當前實例,因此你不須要再經過this.$store.getters的方法去訪問 console.log(this.$store.getters.findArr(2)) console.log(this.$store.getters.findArr(7)) } } </script>
複製代碼
最後在說一句,不少狀況下你是用不到getters的,請按需使用,不要用getters去管理state的全部派生狀態,若是有多個子組件或者說子頁面要用到,才考慮用getters.
不忘初心,方得始終
喜歡博主的童鞋能夠掃描二維碼加博主好友~ 也能夠掃中間二維碼入駐博主的粉絲羣(708637831)~固然你也能夠掃描二維碼打賞並直接包養帥氣的博主一枚。