Vue：資料改變，除了利用method或computed，還有getter。

Getter好處是當資料集中管理，部分組件或元件需要用到不同資料下，可提供相對應的改變。如此，資料統一管理、資料與元件分開，易於維護。getter可以有兩個參數，一個為 state，或者也可為其他getter當作參數：

基本state參數：

首先，我們看一下在store中state的資料內容：

state: {
    accounts: [
      {
        id: 1,
        account: "Edward"
      },
      {
        id: 2,
        account: "Daisy"
      }
    ]
}

如果，id為1的資料需要大規模的運用在部分元件或組件中，此時可以使用getter來做處理：

getters: {
    fetchEdward: state => {
      return state.accounts.filter(id => id.id === 1)
    }
}

並且在需要用的畫面上，引入mapGetters及寫入computed：

import { mapGetters } from "vuex";
export default {
  name: "Home",
  computed: {
    ...mapGetters(["fetchEdward"]),
  },
};

畫面結果如下：

 <div class="home">
    {{ fetchEdward }}
 </div>

• 其他getter當作參數：
  例如：我們可以計算出getter出來的資料筆數有多少筆：

getters: {
    fetchEdward: state => {
      return state.accounts.filter(id => id.id === 1)
    },
    totalAccounts: (state, getters) => {
      return getters.fetchEdward.length;
    }
}

模板：

import { mapGetters } from "vuex";
export default {
  name: "Home",
  components: {},
  computed: {
    ...mapGetters(["fetchEdward", "totalAccounts"]),
  },
};
<template>
  <div class="home">
    {{ fetchEdward }}
    <hr />
    <br />
    統計所有帳戶：{{ totalAccounts }} 筆
  </div>
</template>

結果如下：