Question

我已经使用vuex大约一个星期了。我的商店中有以下状态

state: {
    propA: "test",
    propB: 5.9
}

我想在我的组件中访问propA。所以我使用以下

this.$store.state.propA;

一切正常

但我观看并遵循的所有教程建议使用getter访问state属性，如下所示

getters: {
    propA(state){
        return state.propA:
    }
}

并在组件中使用它如下

this.$store.getters.propA;

我是否必须为我想访问的状态中的每个属性设置一个getter，即使它不是state属性的计算值为每个属性设置getter更加冗长，我们可以使用this.$store

直接访问

Answer 1

不，没有必要为每个属性设置getter。

只有在需要一些额外的计算时才需要吸气剂。来自vuex documentation for getters：

有时我们可能需要根据商店状态计算派生状态，例如过滤项目列表并计算它们

因此，要访问组件中的属性，只需使用

this.$store.state.propA;

或使用mapState帮助者：

对象的版本：

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // arrow functions can make the code very succinct!
    propA: state => state.propA,

    // passing the string value 'propB' is same as `state => state.propB`
    propBAlias: 'propB'
  })
}

阵列的版本：

computed: mapState([
  // map this.propA to store.state.propA
  'propA'
])

我们应该使用getter来获取非计算状态属性吗？

1 个答案: