【vuex】理解Getters

什麼是getters

在介紹state中咱們瞭解到，在Store倉庫裏，state就是用來存放數據，如果對數據進行處理輸出，好比數據要過濾，通常咱們能夠寫到computed中。可是若是不少組件都使用這個過濾後的數據，好比餅狀圖組件和曲線圖組件，咱們是否能夠把這個數據抽提出來共享？這就是getters存在的意義。咱們能夠認爲，【getters】是store的計算屬性。

操做

經過屬性訪問，經過方法訪問：

在storestore.js

[html] view plain copy
import Vue from 'vue'  
import Vuex from 'vuex'  
Vue.use(Vuex)  
  
export default new Vuex.Store({  
    //建立一個對象來保存應用啓動時的初始狀態  
    state:{  
         // 應用啓動時， count置爲0  
        count:0,  
        todos: [  
            { id: 1, text: '水果類', done: true },  
            { id: 2, text: '蘋果', done: true },  
            { id: 3, text: '蘋果', done: false}  
        ]  
    },  
    getters: {  
        doneTodos: state => {//經過方法訪問  
          return state.todos.filter(todo => todo.done)  
        },  
        doneTodosCount: (state, getters) => {//經過屬性訪問  
            return getters.doneTodos.length  
        }  
    }  
})

vueDome.vue

<template>  
    <div>  
        <P>經過屬性訪問：{{doneTodosCount}}</p>  
        <P>經過方法訪問：{{todos}}</p>  
    </div>  
</template>  
  

/*  
### mapState 輔助函數  
當映射的計算屬性的名稱與 state 的子節點名稱相同時，  
咱們也能夠給 mapState 傳一個字符串數組  
*/  
import { mapState } from 'vuex'  
export default {  
    computed:{  
        todos:function() {  //經過方法訪問  
            return this.$store.getters.doneTodos;  
        },  
        doneTodosCount () {  
            return this.$store.getters.doneTodosCount  
        }  
    }  
}  
</script>

mapGetters 輔助函數

mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：

<template>  
    <div>  
        <h4>測試1：Count is {{count}}</h4>  
        <P>經過屬性訪問：{{doneTodosCount}}</p>  
        <P>經過方法訪問：{{doneTodos}}</p>  
    </div>  
</template>  
<script>  
import {mapGetters} from 'vuex'  
export default {  
    computed:{  
        count(){  
            return this.$store.state.count  
        },  
        ...mapGetters([  
            'doneTodos',  
            'doneTodosCount'  
        ])  
    }  
}  
</script>

效果同上。分析：
1...mapGetters表示// 使用對象展開運算符將 getters 混入 computed 對象中

2.mapGetters裏面的都是store.js裏面的getters的方法名