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

  

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['expensiveGoods']),
  }
}
</script>

在上述代码中，我们定义了一个名为expensiveGoods的Getter，它返回那些价格高于20的商品对象，然后在组件中使用mapGetters将它映射到了计算属性中，以供我们在页面中使用。

2、计算属性

假设我们需要计算一个购物车中所有商品的总价，我们可以使用Getter来完成这个目标。代码如下：

// store.js
const store = new Vuex.Store({
  state: {
    cart: [
      { id: 1, name: '商品A', price: 20, count: 2 },
      { id: 2, name: '商品B', price: 30, count: 1 },
      { id: 3, name: '商品C', price: 25, count: 3 },
    ]
  },
  getters: {
    totalPrice: state => {
      return state.cart.reduce((acc, cur) => acc + cur.price * cur.count, 0)
    }
  }
})

// component.vue

  

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['totalPrice']),
  }
}
</script>

在上述代码中，我们定义了一个名为totalPrice的Getter，它计算了购物车中所有商品的总价，并返回这个值。然后我们将totalPrice映射到了组件的计算属性中，以供我们在页面中使用。

3、排序数据

假设我们需要将商品列表按照价格从高到低排序后展示出来，我们可以使用Getter来完成这个目标。代码如下：

// 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: {
    sortedGoods: state => {
      return state.goods.sort((a, b) => b.price - a.price)
    }
  }
})

// component.vue

  

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['sortedGoods']),
  }
}
</script>

在上述代码中，我们定义了一个名为sortedGoods的Getter，它将商品列表按照价格从高到低排序后返回。然后我们将sortedGoods映射到了组件的计算属性中，以供我们在页面中使用。

六、总结

本文通过对Vue Store Getters的概念、使用方法、依赖、访问方式以及使用案例的详细讲解，希望能够帮助读者更好地掌握Vuex中Getter的使用方式。Getter是一个非常强大且重要的概念，在实际开发中我们应该充分利用Getter来简化数据计算的过程，提高代码的可读性和可维护性。