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

正在发生的事情：

该组件通过道具接收id。

加载组件时，我需要根据ID提取一些数据

我有一个created()钩子，从那里我可以调用函数fetchData()来获取数据。
在方法中，fetchData()函数调度一个操作来获取数据。这将获取数据并将其存储在Vuex存储中。
计算出的属性todos获取此ID的数据。

问题在于，第一次加载页面时，计算出的属性todos显示为未定义。如果我更改页面（客户端），则计算所得的属性将从商店中获取正确的数据并显示出来。

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

Answer 1

我认为，解决方案是为todos创建一个吸气剂。

因此，在您的VueX Store中添加：

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

并且比您在computed中使用时要高：

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

Answer 2

您可以使用以下方法：

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

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

2 个答案: