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過濾后的數據。