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. Компонент получает id через реквизит.

Когда компонент загружается, мне нужно получить некоторые данные на основе идентификатора

У меня есть created() ловушка, откуда я вызываю функцию fetchData() для извлечения данных.

В методах функция fetchData() отправляет действиечтобы получить данные.Он получает и сохраняет данные в хранилище Vuex.

Вычисленное свойство todos получает данные для этого идентификатора.

Проблема заключается в том, чточто при первой загрузке страницы вычисленное свойство 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);
    },

Answer 2

Я думаю, что это может решить, если вы создадите геттер для todos.

Итак, в вашем магазине VueX добавьте:

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

А чем в вашем computed использовании:

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