javascript - Vue.js/Vuex : Calling getter vs Accessing state value directly on create lifecycle hook

Question

我正在使用 vue.js 中创建的生命周期 Hook 将数据从我的商店加载到 vue 组件的数据中。我注意到 this.selectedType = store.state.selectedType 成功地从商店加载了数据。但是，如果我使用 getter 从商店加载(即 this.selectedType = store.getters.getType())，我会收到以下错误:

创建 Hook 时出错:“TypeError:无法读取未定义的属性‘selectedType’”

我不明白为什么它说 selectedType 是未定义的，因为 selectedType 在商店中有值 "Item" 并且在创建时正确加载，如果我使用this.selectedType = store.state.selectedType。

getter 定义如下:

getters: {
    getSelectedType: state => {
      return state.selectedType
    }
}

状态定义为:

state: {
  selectedType: "Item"
}

有人可以解释为什么会这样吗？我的预感是生命周期中有一些我不完全理解的东西导致了这种混淆。

Answer 1

你不应该调用 setter/getter 。就像计算属性一样，您可以像读取变量一样编写它。在后台，您在 Vuex 存储中定义的函数使用状态、getter(可能还有 rootState 和 rootGetters)被调用并返回一些值。

除此之外，使用生命周期钩子(Hook)来初始化任何变量通常是一种反模式。本地“组件”变量可以在组件的 data 属性中初始化，而 vuex 状态之类的东西通常在计算属性中结束。

我想指出的最后一件事是，如果您已将商店正确添加到您的 Vue 应用程序，您可以使用 this.$store 在任何组件中访问商店。要在您的应用程序中使用 getter，您可以使用 mapGetters 帮助程序将 getter 映射到组件属性。我建议使用这样的东西:

import { mapGetters } from 'vuex';

export default {
  // Omitted some things here

  computed: {
    ...mapGetters({
      selectedType: 'getSelectedType'
    })
  },

  methods: {
    doSomething () {
      console.log(this.selectedType);
    }
  }
}

这在功能上等同于:

computed: {
  selectedType () {
    return this.$store.getters.getSelectedType;
  }
}