vuex中的getters

vuex中的getters與vue中的computed計算屬性十分相似，在vuex中的Store倉庫里，state就是用來存放數據，而getters類似于computed計算屬性，也可以對數據進行處理，getters可以對store中的數據進行相應的處理，在調用getters時就會返回處理后的結果。

1.語法

//語法一 getters:{vName:function(state){}, //state傳入的是vuex中的state對象vName2:function(state，getters){} //getters傳入的是getters對象 }//語法二 getters:{vName(state){},vName2(state，getters){} }

2.示例

2.1 過濾小于5的數

const store = Vuex.Store({state:{lis:[1,2,3,4,5,6,7,8]},getters:{filtedList: state = >{return state.lis.filter(lisitem => lisitem > 5)}}});

2.2統計lis2的大于5的個數

const store = Vuex.Store({state:{lis:[1,2,3,4,5,6,7,8],lis2:[3,4,5,6,7,8,9]},getters:{filtedLis: state = >{return state.lis.filter(lisitem => lisitem > 5)},filtedLis2: state = >{return state.lis.filter(lisitem => lisitem > 5)},//通過getters獲取getters中的其他數據getlisLength:(state,getters) =>{return getters.filtedLis2.length}}});

2.3過濾小于自定義的數

這里可能有點難懂，我逐步解析：$store.getters.filtedList返回的是一個函數，而函數接受一個num參數，而這個函數過濾掉了state中的lis中小于num的值。

• $store.getters.filtedList 代表的是一個函數function(num)
• $store.getters.filtedList(2) 調用函數function(num)并傳入數字2
• state.lis.filter(item => item >= num) 執行函數并過濾掉lis小于2的數據，并返回數組

<!--某組件用到這個$store.getters--> <template><div><!--傳入2，過濾小于2的數--><h1>{{$store.getters.filtedList(2)}}</h1></div> </template>const store = Vuex.Store({state:{lis:[1,2,3,4,5,6,7,8]},getters:{filtedList(state){return function(num){return state.lis.filter(item => item >= num)}}} });

總結

以上是生活随笔為你收集整理的vuex中的getters的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。