为什么计算属性在我的 Vue 3 应用程序中不具有反应性？

Question

问题

\n

\xe2\x9c\x85 Vue 2： \n计算属性在 vuex 存储突变后更新。

\n

\xe2\x9d\x8c Vue 3： \nvuex 存储突变后计算属性不会更新。

\n

Vuex 4

\n

目的：从 Firestore 获取帖子。添加到“postsArray”。进行突变。

\n

注意：函数“getNextPosts”是从允许无限滚动的（工作）交叉观察器调用的。

\n

const postsArray: Array<string> = [];\nconst vuexStore = createStore({\n  state: {\n    posts: []\n  },\n  actions: {\n    // See https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate_a_query\n    getFirstPosts({ commit }) {\n      const getFirstPosts = async () => {\n        const firstPostsQuery = firestore.collection("posts").limit(3);\n\n        // Get FIRST posts.\n        const firstPosts = await firstPostsQuery.get();\n\n        // Add to postsArray.\n        for (const doc of firstPosts.docs) {\n          postsArray.push(doc.id);\n        }\n\n        // Add to vuex store.\n        commit("addFirstPostsToVuex", postsArray);\n\n        // Set reference.\n        lastPostDownloaded = firstPosts.docs[2]; // 3rd post.\n      };\n      getFirstPosts();\n    },\n    getNextPosts({ commit }) {\n      const getNextPosts = async () => {\n        const nextPostsQuery = firestore\n          .collection("posts")\n          .startAfter(lastPostDownloaded)\n          .limit(2);\n\n        // Get NEXT posts.\n        const nextPosts = await nextPostsQuery.get();\n\n        // Add to postsArray.\n        for (const doc of nextPosts.docs) {\n          postsArray.push(doc.id);\n        }\n\n        // Add to vuex store.\n        commit("addNextPostsToVuex", postsArray);\n\n        // Update reference.\n        lastPostDownloaded = nextPosts.docs[1]; // 2nd post.\n      };\n      getNextPosts();\n    }\n  },\n  mutations: {\n    addFirstPostsToVuex(state, value) {\n      state.posts = value;\n    },\n    addNextPostsToVuex(state, value) {\n      state.posts = value;\n    }\n  }\n});\n

\n

计算属性

\n

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

\n

v-for

\n

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

\n

Answer 1

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