在公司專案中，有多筆資料是從 actions 的回傳結果再透過 mutations 來更改資料狀態。這時候想要透過 computed 來處理這些資料，但是還要再把資料傳入 components 中再做處理，感覺總是沒那麼即時，如果在 Vuex 裡面也可以做 computed 就好了…咦？還真的有嗎！？太方便了吧！

需求

我的資料有複數筆陣列，結構如下示範：

1
2
3
const list_one = ['A001', 'A002', 'A003', 'A004'],
const list_two = ['B001', 'B002', 'B003'],
const list_three = ['C001', 'C002', 'C003', 'C004', 'C005']

我的需要是將複數筆陣列的資料給合併成一個陣列，然後再去做資料處理。

Getters 的用法

如果要把 state 的資料給傳入 component 中再做處理也是一種作法，但是先在 Vuex 中做完，然後再拿到處理好的資料看要再做其他處理，這樣應該會是一個更好的作法。

以下是我在 CodeSandbox 做的範例

作法跟一般 component 中的 computed 差不多，差別在需要帶一個參數，也就是資料來源 state：

1
2
3
4
5
6
7
8
9
10
11
state: {
  list_one: ["A001", "A002", "A003", "A004"],
  list_two: ["B001", "B002", "B003"],
  list_three: ["C001", "C002", "C003", "C004", "C005"]
},
getters: {
  combineArray(state) {
    const { list_one, list_two, list_three } = state;
    return list_one.concat(list_two, list_three); // 這裏使用 concat() 來做合併陣列
  }
}

接著在 component 中來接收資料狀態：

1
2
3
4
5
computed: {
  combineArray() {
    return this.$store.getters.combineArray;
  }
}

如果有多筆來自 Vuex 的資料的話，最方便可以使用 mapGetters，效果也是一樣的：

1
2
3
4
5
6
7
8
<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["combineArray"]),
  },
};
</script>