Vue Store Getters全方位解析

小蓝 • 2025-01-01 11:06 • 编程

一、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/n/304745.html