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 с помощью реквизита.

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

2. у меня есть created() крюк, откуда я вызываю функцию fetchData() чтобы получить данные.

3. В методах fetchData() Функция отправляет действие для получения данных. Это получает и сохраняет данные в магазине Vuex.

4. Вычисляемая собственность 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

База здесь

При вызове этого хука настраиваются следующие параметры: реактивные данные, вычисляемые свойства, методы и наблюдатели. Однако этап монтирования еще не начался, и свойство $el еще не будет доступно.

Answer 3

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

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

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

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

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