Vuex 4, 구성 요소의 상태가 비어 있음

Vuex 4, 구성 요소의 상태가 비어 있음

나는 이것을 이용하여 피실험자 상점 상태에 접근하려고 한다.$store.state.내 집 구성 요소 안에 있는 주제들은 빈 배열로 나온다.console.log를 사용하여 상태를 볼 수 있는 유일한 위치.대상자가 돌연변이 함수에 있는 경우다른 곳에서는 console.log가 비어 있음.내가 보기에는 국가가 돌연변이를 계속하는 것은 아닌 것 같은데, 그 이유는 잘 모르겠다.

나는 꽤 많은 스택 오버플로우 답변을 시도했지만, 그들 중 어떤 것도 문제를 해결하지 못하거나 내가 게시물에서 무엇을 읽고 있는지 전혀 알지 못한다.나는 또한 수입이나 템플릿과 같이 이 게시물을 더 읽기 쉽게 만들기 위해 코드 블록에서 코드를 남겨두었다.

store index.js

export default createStore({
    state: {
        subjects: [],
    },
    actions: {
        getSubjects({ commit }) {
            // Manages subjects, allow for display in column or Calendar view
            axiosMain({
                method: "get",
                url: "/study/",
                withCredentials: true,
            })
                .then((response) => {
                    commit("setSubjects", response.data);
                })
        },
    },
    mutations: {
        setSubjects(state, subjectsToSet) {
            state.subjects = subjectsToSet;
            console.log(state.subjects) # Is a populated array
        }
    }
});

메인 js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import VueGtag from "vue-gtag-next";
import store from "./store";
import "./assets/main.css";

createApp(App)
    .use(router)
    .use(store)
    .use(VueGtag, {
        property: {
            id: "G-E4DPXQ96HB",
        },
    })
    .mount("#app");

홈뷰

<template>
</template>

<script>
export default {
    name: "Home",
    data() {
        return {
            subjects: [],
        };
    },
    mounted() {
        this.callStoreSubjectAction();
        this.setSubjectsToStoreSubject();
    },
    methods: {
        callStoreSubjectAction() {
            this.$store.dispatch("getSubjects");
        },
        setSubjectsToStoreSubject() {
            this.subjects = this.$store.state.subjects;
            console.log(this.$store.state.subjects); # Is an empty array
        },
    },
};
</script>

구성 요소에서 다음 값을 복사하는 경우this.$store.state.subjects공리 호출이 완료되기 전에먼저 해결하겠다는 약속을 기다려라.그러기 위해서는 먼저 행동에서 나온 약속을 되돌려야 할 것이다.

getSubjects({ commit }) {
  return axiosMain({   // returning the promise
    ... 
  }
}

약속을 기다리는 중:

mounted() {
  this.$store.dispatch("getSubjects").then(r => {
    this.subjects = this.$store.state.subjects;
    console.log(this.$store.state.subjects);
  });
},

---

이것보다 더 좋은 것은 제거하기 위함입니다.subjects구성 요소 데이터에서 계산된 데이터를 사용하여 Vuex 상태와 동기화:

import { mapState } from 'vuex';

computed: {
  ...mapState(['subjects'])  // creates a computed `this.subjects`
}

그러면 조치를 취하기만 하면 나머지 부분은 구성 요소가 처리하게 된다.

mounted() {
  this.$store.dispatch("getSubjects");
}

참조URL: https://stackoverflow.com/questions/66116133/vuex-4-state-is-empty-in-component