iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
自我挑戰組

與Vue相遇系列 第 24

Day024-Vuex 資料控管介紹(四)-Getters改變資料內容

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>

https://ithelp.ithome.com.tw/upload/images/20201007/201306546VDHN0DwVn.jpg

  • 其他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>

結果如下:
https://ithelp.ithome.com.tw/upload/images/20201007/20130654Ef6MFyLEuU.jpg


上一篇
Day023-Vuex 資料控管介紹(三)-Mutation與Actions資料運作
下一篇
Day025-透過Vuex-實作簡易部落格
系列文
與Vue相遇30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言