vuex（二）getters

getters： 有時候，我們需要對state的資料進行篩選，過濾。這些操作都是在元件的計算屬性進行的。如果多個元件需要用到篩選後的資料，那我們就必須到處重複寫該計算屬性函數；或者将其提取到一個公共的工具函數中，并将公共函數多處導入 - 兩者都不太理想。如果把資料篩選完在傳到計算屬性裡就不用那麼麻煩了，getters就是幹這個的，你可以把getters看成是store的計算屬性。getters下的函數接收接收state作為第一個參數。那麼，元件是如何擷取經過getters過濾的資料呢？ 過濾的資料會存放到$store.getters對象中。該方法為擷取vuex中的資料

大家看這樣一段代碼：

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
state: {
    name: "Jack Chan",
    age: 18,
},
mutations: {
//接受頁面參數，改變state中資料
},
getters: {
    age: function (state) {
    return state.age;//傳回state資料中的年齡。
    }
},
actions: {}
});
export default store
      

　　

vue如下：

<template>
    <div>
    {{age}}
    </div>
</template>
<script>
import store from '../../../utils/store';
export default {
components: {
},
data () {
    return {}
},
computed: {
    age: function () {
        return store.getters.age;
    }
},
}
</script>
<style scoped>
 
</style>      

列印結果為18,store.getters.age就是讀取的getters過濾後的資料。

作者：狗尾草