Question

我正在使用vue.js中创建的生命周期挂钩将数据从商店加载到vue组件的数据中。我注意到this.selectedType = store.state.selectedType已成功从商店加载数据。但是，如果我使用吸气剂从商店（即this.selectedType = store.getters.getType()）加载，则会出现以下错误：

Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"

我不明白为什么要说selectedType是未定义的，因为selectedType在商店中的值为"Item"，并且如果我使用this.selectedType = store.state.selectedType则可以在create上正确加载。

getter的定义如下：

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

状态定义为：

state: {
  selectedType: "Item"
}

有人可以解释为什么会这样吗？我很直觉，我不完全了解生命周期的某些问题，这导致了这种混乱。

谢谢！

Answer 1

您不应打电话给吸气剂。就像计算的属性一样，您可以像读取变量一样编写它。在后台，使用状态，getter（可能还有rootState和rootGetters）调用您在Vuex存储中定义的函数，并返回一些值。

此外，使用生命周期钩子初始化任何变量通常是一种反模式。可以在组件的data属性中初始化局部的“组件”变量，而诸如vuex状态之类的结果通常以计算属性结束。

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

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;
  }
}

Answer 2

我之所以这样认为是因为您不应该在created()生命周期钩子上更改您的数据。尝试在beforeMount()或mounted()

上这样做

https://vuejs.org/v2/guide/instance.html

Vue.js / Veux：在创建生命周期钩子上直接调用getter与访问状态值

2 个答案: