VueJS：计算属性是在组件中创建之前计算的吗？

Question

我有一个组件，如下所示：

export default {
  name: 'todos',
  props: ['id'],
  created () {
    this.fetchData()
  },
  data() {
    return {
    }
  },
  computed: {
    todos () {
      return this.$store.state.todos[this.id]
    }
  },
  methods: {
    async fetchData () {
      if (!this.$store.state.todos.hasOwnProperty(this.id)) {
        await this.$store.dispatch('getToDos', this.id)
      }
    }
  }
}

这就是正在发生的事情：

1. 该组件接收idvia 属性。

当组件加载时，我需要根据 id 获取一些数据

2. 我有一个created()钩子，可以从其中调用函数fetchData()来获取数据。

3. 在方法中，fetchData()函数调度一个操作来获取数据。这会获取数据并将其存储在 Vuex 存储中。

4. 计算属性todos获取此 id 的数据。

问题是，当页面首次加载时，计算属性todos显示为未定义。如果我更改页面（客户端），则计算属性将从存储中获取正确的数据并显示它。

我无法理解为什么计算属性不更新？

Answer 1

我认为如果你为todos.

所以在你的 VueX Store 中添加：

getters: {
    todos(state) {
        return state.todos;
    }
};

与您的使用相比computed：

computed: {
    todos () {
        return this.$store.getters.todos[this.id]
    }
}