vuex getter的用法

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

二.操做
經過屬性訪問，經過方法訪問：
在store\store.js


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



經過屬性訪問：2經過方法訪問： [{ id: 1, text: '水果類', done: true },{ id: 2, text: '蘋果', done: true }]


複製代碼

<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的方法名