Я не могу l oop над массивом из Vuex

Question

Я разрабатываю эту небольшую веб-страницу для хранения рецептов с использованием Vue, Vuex и Firebase.

У меня есть компонент, в котором я хочу отобразить своего рода облако тегов для последующей фильтрации. Проблема в том, что после хранения массива в компоненте я не могу получить доступ к самому массиву для выполнения действий над ним. Я знаю, что данные есть, потому что я отображаю список рецептов с v-for, но я не могу сделать for или forEach.

У меня есть здесь код:

methods: {
    getRecipes() {
      this.recipes = this.$store.getters.allRecipes;
    },

    getTags() {
      console.log(this.recipes);  // ==> Here the recipes show OK

      this.recipes.forEach((recipe) => {
        console.log(recipe); // ==> It never logs here
      });

      // ==> I have also done it with the long way, and doesn't log

      // for (let i = 0; i < this.recipes.length; i++) {
      //   const element = this.recipes[i];
      //   console.log(element);
      // }
    }
  },

  created() {
    this.$store.dispatch("clearStore");
    this.$store.dispatch("getRecipes").then(this.getRecipes(), this.getTags());
  }

Я также попытался ввести данные с вычисляемым свойством, и он отобразил список нормально (и я считаю, что это правильный способ сделать это), но я все еще не мог перебрать массив.

Попытка войти this.recipes в консоль возвращает объект-наблюдатель, который Vue создает, что ожидается, но в Vue DevTools он отображает массив так, как должен. В консоли:

[__ob__: Observer]
0: {…}
1: {…}
2: {…}
3: {…}
4: {…}
5: {…}
6: {…}
7: {…}
8: {…}
9: {…}
length: 10
__ob__: Observer {value: Array(10), dep: Dep, vmCount: 0}
__proto__: Array

При входе в систему this.recipes.length он показывает 0

Для дерьма и хихиканья я пробовал с данными локально в компоненте, и он работает.

Любая помощь, пожалуйста?

Answer 1

Мы не можем видеть ваше действие getRecipes (не метод), но выборка не обязательно завершена, когда вы обращаетесь к получателю, если действие построено неправильно. Тот факт, что он работает при использовании computed, показывает, что данные поступают позже, потому что затем вычисляется корректировка, и вы видите это.

Я рекомендую использовать computed для getRecipes и * компонента 1005 * методов, и тогда это не будет иметь значения, но если вы хотите вместо этого этот шаблон, измените ваше getRecipes действие:

actions: {
  async getRecipes() {
    const response = await axios.get(...);
    // set data
    return response.data; 
  }
}

Возвращение обещания получения также будет работать, если вы не хотите использовать async/await:

actions: {
  getRecipes() {
    return axios.get(...).then(response => {
      // set data
      return response.data;
    });
  }
}