用getters代替计算属性来管理Vuex状态

2023-12-23 14:57:50

在Vuex中，我们通常使用计算属性来从store中派生新的状态。然而，在某些情况下，使用getters可能是一个更好的选择。

为什么使用getters？

与计算属性相比，getters具有以下优点：

缓存结果： getters的计算结果会被缓存，这意味着在同一组件中再次访问时，无需重新计算。这可以提高性能，尤其是在getters的计算成本很高的情况下。
可测试性： getters可以独立于组件进行测试，这使得测试和维护代码变得更加容易。

用getters代替计算属性

在我们的示例中，我们有一个计算属性来计算两个数字的总和。我们可以将其替换为getter如下：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    num1: 10,
    num2: 20
  },
  getters: {
    sum(state) {
      return state.num1 + state.num2
    }
  }
})

然后，我们可以在组件中使用getter：

// MyComponent.vue
<template>
  <div>
    <p>Num1: {{ num1 }}</p>
    <p>Num2: {{ num2 }}</p>
    <p>Sum: {{ sum }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    num1() {
      return this.$store.state.num1
    },
    num2() {
      return this.$store.state.num2
    },
    sum() {
      return this.$store.getters.sum
    }
  }
}
</script>