Vue Store Getters全方位解析

一、Vue Store Getters的概念

Vue Store Getters是Vue.js框架中的一個重要概念，它主要用於獲取Vuex中的state。在Vuex中，state是存儲在store中的一個對象，用於跨組件傳遞數據的一個儲存庫。當我們需要獲取state中的數據時，可以通過Vuex中的Getter來獲取。

Getter是Vuex中的一個計算屬性，它的作用是對store中的數據進行計算，返回一個新的值。和Vue中的計算屬性類似，Getter也具有緩存功能，只有在它依賴的值更改時才會重新計算。

在實際開發中，Getter通常用於數據過濾、分組、排序等複雜的數據計算場景中。通過在Getter中進行數據處理，我們可以讓組件更加簡潔，使得Vuex的使用變得更加方便。

二、Vue Store Getters的使用方法

在Vuex中，我們可以通過store對象的getters屬性來定義Getter，代碼如下：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

在上述代碼中，我們通過getters屬性定義了一個名為doneTodos的Getter。這個Getter返回的是state.todos中done屬性為true的所有項。

使用Getter非常簡單，只需要在組件內使用this.$store.getters.doneTodos即可獲取到計算得到的值。可以看到，雖然Getter函數接收state作為第一個參數，但我們並不需要顯示地調用它，而是像調用一個屬性一樣使用。

三、Vue Store Getters的依賴

Getter函數可以接受其他Getter作為參數，這就使得我們可以通過組合多個Getter來實現更複雜的計算。在Getter中使用其他Getter非常簡單，只需要定義一個函數來接收其他Getter的返回值即可，代碼如下：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false },
      { id: 3, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})

在上述代碼中，我們定義了一個名為doneTodosCount的Getter，它接收doneTodos作為第二個參數，並返回doneTodos的長度。這意味着當doneTodos發生變化時，doneTodosCount也會重新計算執行，從而保證了Getter的緩存功能。

四、Vue Store Getters的訪問方式

Getter的訪問方式有兩種，一種是通過store對象上的getters屬性訪問，另外一種是通過mapGetters函數進行訪問。按照官方文檔中的推薦，我們應該使用後者。

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodos',
      'doneTodosCount'
    ])
  }
}

在上述代碼中，我們通過展開運算符和mapGetters函數將doneTodos和doneTodosCount映射到組件的計算屬性中，便於我們在組件中訪問。這樣做的好處在於，我們可以像訪問組件內的計算屬性一樣訪問Getter，代碼更加簡潔易讀。

五、Vue Store Getters的使用案例

1、過濾數據

假設我們有一個商品列表，其中包含若干個商品對象。我們希望在展示商品列表的時候，只展示那些價格高於一定閾值的商品。代碼如下：

// store.js

const store = new Vuex.Store({

state: {

goods: [

{ id: 1, name: '商品A', price: 20 },

{ id: 2, name: '商品B', price: 30 },

{ id: 3, name: '商品C', price: 25 },

{ id: 4, name: '商品D', price: 40 },

{ id: 5, name: '商品E', price: 15 },

]

},

getters: {

expensiveGoods: state => {

return state.goods.filter(good => good.price > 20)

}

}

})
// component.vue
{{ good.name }}
{{ good.price }}
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/304745.html