vue.js - VueJS : Computed Property Is Calculated Before Created in Component?

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. 组件通过 props 接收一个 id。

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

1. 我有一个 created() Hook ，我从那里调用函数 fetchData() 来获取数据。

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

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

问题在于，当页面首次加载时，计算属性 todos 显示为未定义。如果我更改页面(客户端)，则计算属性会从商店获取正确的数据并显示它。

我不明白为什么计算属性不更新？

Answer 1

您可以使用以下方法:

component.vue(并且只渲染 todoItem)

  methods: {
    async fetchData () {
      const _this = this;
      if (!this.$store.state.todos.hasOwnProperty(this.id)) {
        this.$store.dispatch('getToDos', {id: this.id, callback: () => {
          _this.todoItem = _this.$store.state.todos[_this.id]
        }});
      }
    }
  }

store.js

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