Vue 3 앱에서 계산된 속성이 반응하지 않는 이유는 무엇입니까?

Vue 3 앱에서 계산된 속성이 반응하지 않는 이유는 무엇입니까?

쟁점.

✅ Vue 2: vuex 스토어 변환 후 계산된 속성이 업데이트됩니다.

❌ Vue 3: vuex 스토어 변환 후 계산된 속성이 업데이트되지 않습니다.

Vuex 4

목적:Firestore에서 게시물을 가져옵니다."postsArray"에 추가합니다.돌연변이를 커밋합니다.

주의: "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-for

<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>

이전 버전과 새 버전 간에 Vuex 내부의 상태를 정의할 때 약간의 차이가 있습니다.

**In Vuex3 state was just a prop with an Object while in Vuex4 it has return an Object or a function which returns an Object.**

V3에서 V4로 마이그레이션할 때 V3 스타일은 V4에서도 작동하기 때문에 처음에는 차이를 알아차리지 못할 수 있습니다.이 차이는 모듈이 있고 여러 인스턴스가 있는 경우를 나타냅니다.그런 다음 주 오염을 피하기 위해 주(tony19)가 객체를 반환하는 함수여야 합니다.

모듈:

// Vuex 3.x Module
const moduleVUEX3 = {
    export const state = { ... }
}

// Vuex 4.x Module
const moduleVUEX4 = {
    export const state = () => ({ ... })
}

단일 스토어:

// Vuex 3.x
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: { ... }
})


// Vuex 4.x
import { createStore } from 'vuex'

const store = createStore({
  state() {
    return { ... }
  }
})

이 질문에 대한 해결책은 다음과 같습니다.

const vuexStore = createStore({
  state: return {
    posts: []
  }
})

원래 이렇게 써요.

<script setup lang="ts">
import { computed, reactive,ComputedRef } from "vue";
import { useStore } from "vuex";
interface State {
  shadow: ComputedRef<boolean>
}
const store = useStore();

const state = reactive<State>({
  shadow: computed(() => store.state.shadow),
)}
</script>

vuex의 상태가 변경되면 페이지가 시간 내에 응답하므로 도움이 되기를 바랍니다.

postsArray를 삭제해 보십시오.반응성과 관련이 있을 것으로 생각됩니다.

돌연변이를 로 변경해 보다

addFirstPostsToVuex(state, docId) {
      state.posts.push(docId);
    }

그리고 당신이 하는 행동할 행동에서

for (const doc of firstPosts.docs) {
          commit("addFirstPostsToVuex",doc.id);
        }

이 문제를 해결할 수 있습니다.mapState저장소 상태를 Vue 구성 요소의 상태에 매핑하는 함수입니다.

위의 코드에서는 다음과 같습니다.

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

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

이제 심실세동이 잘 될 거야

참고 자료: https://vuex.vuejs.org/guide/state.html 및 https://scrimba.com/scrim/c8Pz7BSK?pl=pnyzgAP

언급URL : https://stackoverflow.com/questions/65176456/why-are-computed-properties-not-reactive-in-my-vue-3-app