Почему вычисляемые свойства не реагируют в моем приложении Vue 3?

Проблема

✅ Vue 2: вычисляемые свойства обновляются после изменения хранилища vuex.

❌ Vue 3: вычисляемые свойства не обновляются после изменения хранилища vuex.

Векс 4

Цель: получать публикации из Firestore. Добавить в массив сообщений. Совершить мутацию.

Примечание. Функция getNextPosts вызывается из (работающего) наблюдателя пересечения, который допускает бесконечную прокрутку.

const postsArray: Array<string> = [];
const vuexStore = createStore({
  state: {
    posts: []
  },
  actions: {
    // See https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate_a_query
    getFirstPosts({ commit }) {
      const getFirstPosts = async () => {
        const firstPostsQuery = firestore.collection("posts").limit(3);

        // Get FIRST posts.
        const firstPosts = await firstPostsQuery.get();

        // Add to postsArray.
        for (const doc of firstPosts.docs) {
          postsArray.push(doc.id);
        }

        // Add to vuex store.
        commit("addFirstPostsToVuex", postsArray);

        // Set reference.
        lastPostDownloaded = firstPosts.docs[2]; // 3rd post.
      };
      getFirstPosts();
    },
    getNextPosts({ commit }) {
      const getNextPosts = async () => {
        const nextPostsQuery = firestore
          .collection("posts")
          .startAfter(lastPostDownloaded)
          .limit(2);

        // Get NEXT posts.
        const nextPosts = await nextPostsQuery.get();

        // Add to postsArray.
        for (const doc of nextPosts.docs) {
          postsArray.push(doc.id);
        }

        // Add to vuex store.
        commit("addNextPostsToVuex", postsArray);

        // Update reference.
        lastPostDownloaded = nextPosts.docs[1]; // 2nd post.
      };
      getNextPosts();
    }
  },
  mutations: {
    addFirstPostsToVuex(state, value) {
      state.posts = value;
    },
    addNextPostsToVuex(state, value) {
      state.posts = value;
    }
  }
});

Вычисляемые свойства

export default ({
  computed: {
    posts() {
      // List rendering.
      return vuexStore.state.posts;
    }
  }
});

v-для

<template>
  <div id="feed">
    <article class="post" v-for="post in posts" v-bind:key="post.id">
      <header class="info">
        {{ post }}
      </header>
    </article>
  </div>
</template>

firebase vue.js vuex vuejs3 vuex4
person Vue3    schedule 07.12.2020    source источник
comment
можете ли вы поделиться полным кодом компонента, в котором вы использовали вычисляемое свойство   -  person Amaarrockz    schedule 07.12.2020
comment
Также вместо импорта всего хранилища вы можете использовать ... mapState в своем вычисляемом свойстве.   -  person Amaarrockz    schedule 07.12.2020
comment
Что делать, если вы используете геттеры vuex: vuex.vuejs.org/guide/getters.html   -  person Imre Ujlaki    schedule 07.12.2020
comment
пожалуйста, поделитесь кодом main.ts   -  person Boussadjra Brahim    schedule 07.12.2020

Ответы (1)


arrow_upward
0
arrow_downward

Это можно исправить, если вы используете функцию mapState для сопоставления состояния хранилища с состоянием компонента Vue.

В приведенном выше коде это будет примерно так:

import { mapState } from "vuex";
import { defineComponent } from "vue";

export default defineComponent({
     computed: {
        ...mapState(["posts"])
     }
});

Теперь v-for должен работать нормально.

Ссылка: https://vuex.vuejs.org/guide/state.html и https://scrimba.com/scrim/c8Pz7BSK?pl=pnyzgAP

person Helper function    schedule 07.12.2020