Vue.js VueJS:是否在组件中创建之前计算计算属性？

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

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

这就是正在发生的事情：

组件通过道具接收

id

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

我有一个

created（）

在方法中，

fetchData（）

函数分派一个操作以获取数据。这将获取数据并将其存储在Vuex存储中

计算属性

todos

获取此id的数据

问题是当页面第一次加载时，计算属性

todos

显示为未定义。如果我更改了页面（客户端），那么computed属性将从存储中获取正确的数据并显示它

---

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

我认为如果您为

TODO

创建一个getter，可能会解决这个问题

因此，在VueX应用商店中添加：

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

而不是在您的

计算中使用：

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

您可以使用以下方法：

component.vue（只需渲染
todoItem
）

store.js

  actions: {
    getToDos: (context, payload) => {
      // simulate fetching externally 
      setTimeout(() => {
        context.commit("getToDos__", {newId: payload.id, task: "whatever" });
        payload.callback();
      }, 2000);
    },

您是否也可以显示
getToDos
函数的代码？@T.Dirks getToDos是一个Vues操作，它为数据调用外部api，然后提交变异。getToDos（{commit}，payload）{return api.content.getToDos（payload.is）.then（response=>{commit（'SET_TODOS'，response）return response}）.catch（error=>{console.log（error）return error}）}我自己对这个问题的理解是，在调用这个方法之前，已经设置了计算值。当时，商店没有数据。稍后，调用该方法并填充存储。但是我不知道如何更正它。您可以从根组件（
App.vue
）触发
fetchData
函数，这样所有其他组件都可以使用该数据，并在组件中使用
fetchData
来更新数据。现在，我选择通过在我调用fetchData（）的位置前置来解决问题这个问题暂时解决了。然而，我想让这个问题保持开放，因为我真的想了解这里发生了什么。我尝试了这个，但它没有解决问题。在我读到的其他一些帖子中，我建议添加一个观察者，但我不知道如何做。我认为观察者对你没有任何好处，你可以编辑你的问题来显示所有相关的代码吗？那么使用它的组件、分派方法和变异方法呢？如果你展示所有相关部分，我们可能会更好地理解问题所在，我认为这会起作用，但我们为什么要这么做？为什么我可以用其他方式更新计算的属性值？我不知道您是如何更新存储的，但我想您只是直接更新数组中的索引。vue无法监视此类更改，因此您必须使用此处介绍的技巧
  actions: {
    getToDos: (context, payload) => {
      // simulate fetching externally 
      setTimeout(() => {
        context.commit("getToDos__", {newId: payload.id, task: "whatever" });
        payload.callback();
      }, 2000);
    },