iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
1
自我挑戰組

前端新手筆記-Vue.js系列 第 29

Day29 Vuex Getter用法介紹

  • 分享至 

  • xImage
  •  

前言

今天要介紹的Getter,我們其實可以把它想像成Vue中的computed屬性。OK,那我們就開始吧!

Vuex Getter 介紹

使用時機:
昨天我們介紹到 state 是存放元件共同維護的資料,而今天假設我們要對資料進行運算、過濾,過去我們在 Vue 中很直覺就會想到要用 computed 。但在不同元件間,這些過濾資料能否跟 state 一樣,一起被共享維護呢?

答案是可以的!而這也是Vuex Getter存在的目的!這時我們來看官網提供的範例,就能清楚了解到getter 的方便地方勒~

Vuex 使用方式

範例1:未使用getter作法

Javascript部分程式碼

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

我們可以發現,上面範例是透過 computed 取得 storetodo 的相關資料,這時候我們假設我們有多個元件需要用到此屬性,是否就要重複撰寫呢?(有點蠢)
所以這就要用到 Getter 來幫助我們解決這問題!

範例2:使用getter作法

  • state 作為第一個參數、getters 可以作為第二個參數

Javascript部分程式碼

//創建一個store
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, 
        text: 'hello', 
        done: true 
       },
      { id: 2, 
        text: 'hello2', 
        done: false 
      }
    ]
  },
  getters: {
    doneTodos: state => {        //state 作為第一個參數
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {//getters 可以作為第二個參數
      return getters.doneTodos.length
    },
  }
})

我們在元件中即可以下面方式來取得 doneTodos :

//第一個參數
computed: {
  doneTodos() {
    return this.$store.getters.doneTodos;
  },
}
// [ { "id": 1, "text": "hello", "done": true } ]

//第二個參數
computed: {
  doneTodosCount() {
    return this.$store.getters.doneTodosCount
  },
}
// 1

範例3:使用getter作法(返回函數)

我們也可以傳參數到 getters 來取得返回結果,這是非常便利的方式查詢 store 中的陣列。
Javascript部分程式碼

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'hello', done: true },
      { id: 2, text: 'hello2', done: false }
    ]
  },
  getters: {
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})
computed: {
  getTodoById() {
    return this.$store.getters.getTodoById(2);
  }
}

// { "id": 2, "text": "hello2", "done": false }

mapGetters 輔助函數

mapGetters 與 mapState 用法相近

<template>
  <div>
    <div>{{doneTodos}}</div>
    <div>{{doneTodosCount}}</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    mapGetters([
      'doneTodos',
      'doneTodosCount',
    ]),
  },
};
</script>

參考資料


上一篇
Day 28 Vuex state用法介紹
下一篇
Day 30 Vuex Mutations介紹 / 鐵人賽心得
系列文
前端新手筆記-Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言