vuex 상태에 액세스하는 데 어려움을 겪고 있습니다.

vuex 상태에 액세스하는 데 어려움을 겪고 있습니다.

내가 뭘 놓치고 있는지 이해할 수 없어서 미칠 것 같아.기본적으로 vuex를 사용하여 사용자 상태를 저장합니다.루트를 설정하고 Axios를 사용하여 이 루트에 전화를 걸어 사용자로부터 정보를 가져옵니다.vue dev 툴에 상태 및 모든 것이 설정되어 있는 것을 확인할 수 있습니다.접근하는 데 어려움을 겪고 있습니다.다음과 같이 하면console.log(this.$store.state.baseSettings)탑재되어 있는 경우는, 다음과 같이 표시됩니다.

.user를 console.log에 추가하면 필요한 것을 얻을 수 있다고 생각했지만 빈 객체가 표시됩니다.

또, 다음과 같은 것도 시도해 보았습니다.

computed: {
   user() {
      return this.$store.state.baseSettings.user;
   },
}, 

템플릿 자체에서 {{user}}}을(를) 수행하지만 액세스하려고 하면 이 기능이 작동합니다.this.user계산된 메서드, 마운트된 메서드 또는 모든 메서드에서 빈 개체도 얻을 수 있습니다.무슨 이유라도 있나요?제가 뭔가 단순하고 명백한 것을 놓쳤나요?

어떤 도움이라도 주시면 감사하겠습니다!자세한 코드는 다음과 같습니다.

app.filename:

import Vue from 'vue';
import Vuetify from 'vuetify';
import router from '../../router';
import store from './store';
import {userComputed, settingsMethods} from './store/helpers';
import App from '../App.vue';

new Vue({
    router,
    store,
    vuetify: new Vuetify(),
    render: h => h(App),

    computed: {
        ...userComputed,
    },

    methods: {
        ...settingsMethods,
    },

    mounted() {
        return this.getAllSettings();
    },
}).$mount('#app');

App.vue

<template>
    <v-app>
        {{ user }}
        <v-main :class="!user ? 'background-img' : null">
            <v-container fluid>
                <nav-bar/>
                <router-view/>
            </v-container>
        </v-main>
    </v-app>
</template>

<script>

export default {
    computed: {
        user() {
            // Works but only in above <template></template>
            return this.$store.state.baseSettings.user;
        },
    },

    mounted() {
        //  Returns object with user data (see screenshot).        
        console.log(this.$store.state.baseSettings);

        // Empty object!
        console.log(this.$store.state.baseSettings.user);

        // Empty object
        console.log(this.user)
    }
}
</script>

base Settings(베이스 설정)js:

const state = {
    user: {},
};

const getters = {
    getUser: state => _.keys(state.user),
};

const actions = {
    getAllSettings({ commit }) {
        return axios.get('settings').then(baseSettings => {
            commit('setUser', _.get(baseSettings, 'data.user', {}));
        });
    },
};

const mutations = {
    setUser(state, user) {
        state.user = user;
    },
};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations,
};

helpers.delpers:

import { mapActions, mapState } from 'vuex';

export const userComputed = {
    ...mapState('baseSettings', ['user']),
};

export const settingsMethods = {
    ...mapActions('baseSettings', ['getAllSettings']),
};

index.displaces를 표시합니다.

import Vue from 'vue';
import Vuex from 'vuex';
import baseSettings from '../modules/baseSettings';

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({
    modules: {
        baseSettings,
    },
    strict: debug,
});

정말 고마워요!

이것은 이행되지 않은 약속의 문제인 것 같다.

두 가지 작업을 모두 수행하여getAllSettings()접속을 시도합니다.$store같은 라이프 사이클 단계에서 서로 독립적으로 동작합니다.따라서 Axios 콜이 이미 데이터를 보고하고 스토어에 데이터를 저장했다고 보증할 수 없습니다(실행 시 빈 객체가 됩니다).

그러나 계산된 속성은 종속 변수가 변경되면 다시 실행되므로 컴포넌트에 올바르게 표시됩니다.이는 다음 작업 후에 발생합니다.mounted()Axios 콜이 실행되었을 때의 라이프 사이클 스텝.

언급URL : https://stackoverflow.com/questions/64790096/struggling-to-access-state-of-vuex