Vuex 取得狀態的 Getters

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions

如果把Vuex用Vue實例的屬性來比喻(注：這樣比喻是錯的不精準得，但方便聯想) state存放資料類似data Mutations設定方法函式讓人能主動呼叫、觸發，類似methods 那Getters呢？

Getters類似computed

例如現在store.js中是這樣


import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
 state:{
    todos:[ ],
 },
 getters:{

 }
});

export default store;

state裡有個陣列todos代辦清單，現在我們想知道有哪些代辦是沒做的？我們可能會在(.vue)組件這樣寫(注意這只是範例說明，不能執行很正常)


export default {
 computed: {
 ...mapState(['count']),
 todoNotDone(){
 return this.todos.filters(item => !item.done).length
 }
 },
}

在計算屬性多寫一個方法，然後去對todos的內容用filters()篩選，最後取出我們要的陣列(還沒完成的代辦陣列)長度

那如果每個(.vue)組件都需要用到todoNotDone()，不就每個組件都要寫一個todoNotDone()在該組件的computed內嗎？

這種狀況下，建議會把todoNotDone()寫在Vuex的Getters內集中管理改成這樣

const store = new Vuex.Store({
 state:{
 todos:[ ],
 },
 getters:{
 todoNotDone(state){
 return state.todos.filters(item => !item.done).length
 }
 }
});

畢竟我們是要過濾寫在state內的東西，所以todoNotDone(state)的state參數就是Store裡的state 去把它做個過濾再回傳

那(.vue)組件要怎麼寫呢？如同mapState、mapMutations，vuex也有給Getters的方法mapGetters 要使用一樣要import引入

import { mapState, mapMutations, mapGetters } from 'vuex’;

export default {
 computed: {
 ...mapState(['count']),
 ...mapGetters(['todoNotDone'])
 },
}

類似mapState的寫法，mapGetters的用法也是mapGetters( ['名字’] )

mapGetters方法傳入陣列[ ]，並且陣列內的字串會對應到寫在Store中的、在getters內定義的方法名字基本上Mutations和Getters會有一點類似methods和computed的關係(有一點類似而已，當然是不同的東西) 一個是放可以呼叫的函式，一個是放自動計算data回傳值的函式，只是Getters是針對Vuex的State做計算回傳 (Getters並沒有改動到State，就好比computed計算回傳後沒有改動到data)

那麼，如果放在getters的計算方法，有需要取用其他getters的計算屬性回傳值該怎麼處理呢？

例如我想要取得todos陣列長度減掉todoNotDone回傳值，該怎麼做呢？我們可以在getters中，在該方法帶入第二個參數getters

getters:{
 todoNotDone(state){
 return state.todos.filters(item => !item.done).length
 },
 maybeDone(state,getters){
 return state.todos.length - getters.todoNotDone
 }
}

這樣就好囉！

當然了，mapGetters()方法不止傳入陣列，也可以傳入物件例如

import { mapState, mapMutations, mapGetters } from 'vuex’;

export default {
 computed: {
 ...mapState(['count']),
 ...mapGetters({
 //自取的屬性名：對應getters的方法名稱
 justdoit:'todoNotDone'
 })
 },
}

這樣也是可以的呦，只是既然多了個屬性名，那之後取用todoNotDone方法就要靠取用justdoit為主（就只是取用時的名字改成屬性名而已）

最後補充： Getter 很單純，只需設計函式返回需要的state 我們設計不同函式，就可以拿到不同資料型態的 state 把它當成computed聯想會比較好理解

Vuex 取得狀態的 Getters

Written by:

SimonAllen