Vue Store Getters 组件

Vue Store Getters 是使用 Vuex 管理状态时的一部分。它们允许您从存储库中派生状态，而无需更改 Vuex 存储仓库中的状态。 Vuex 是 Vue.js 的大型应用程序程序设计的解决方案，它允许您在应用程序的全局范围内共享状态。

Getters 是什么？

Getter 是一个从 state 中派生状态的函数。Getter 将被放置在您的 Vuex 存储仓库中。Getter 可以让您从一个已建立的状态派生新的状态。

Getter 的语法很简单。不管是箭头函数或是普通函数都可以使用，但必须明确的是，它必须返回一个值。

这就是一个简单的 getter 的例子：

const store = new Vuex.Store({
  state: {
    items: [{id: 1, text: 'hello'}, {id: 2, text: 'world'}]
  },
  getters: {
    getItemById: (state) => (id) => {
      return state.items.find(item => item.id === id)
    }
  }
})

这允许您使用 getter 获取在 items 中特定 id 的项目：

store.getters.getItemById(2) // => {id: 2, text: 'world'}

在这种情况下，getter 接收接收两个参数：

• state 对象：包含了 Vuex 存储仓库中的状态。
• getters 对象：包含了您在 getters 中定义的函数。

此外，getter 将自动缓存其计算结果和重用，只要其依赖项不发生变化。

这意味着，如果在状态更改时，getter 内使用的数据没有任何变化，那么 getter 也将不会重新计算。

将 Getter 注册到组件

Vue 组件可以使用 computed 属性来访问 getter。

<template>
  <div>{{ item.text }}</div>
</template>

<script>
export default {
  computed: {
    item () {
      return this.$store.getters.getItemById(this.itemId)
    },
    itemId () {
      return this.$route.params.id
    }
  }
}
</script>

结论

在 Vuex 中使用 Getter 的意义在于它可以让您从全局状态中派生一些新的状态，并访问这些状态而无需重复编写代码。

如此可节省代码量，也方便了维护。 通过缓存计算结果，Getter 也可以优化应用程序的性能。 由于 Vuex 本来就是为大型和复杂的应用程序而设计的，所以 Getter 这种“获取派生状态”的方法对于在 Vuex 中进行状态管理的开发者来说，是一种非常实用和必要的方案，Vue Store Getters 组件就是更好的实现方式之一。