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