Question

我为此感到疯狂，因为我不明白自己可能会缺少什么。所以我基本上是在使用vuex来存储用户状态。我已经设置了一条路线，并使用Axios对该路线进行了调用，以从用户那里检索一些信息。我可以在vue开发工具中看到状态和所有东西都已经设置好了，我真的很难访问它。如果我在安装时执行以下console.log(this.$store.state.baseSettings)，则显示以下内容：

现在，我会想到将.user添加到该console.log上，我会得到所需的确切信息，但它显示了一个空对象。

我也尝试了以下方法：

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

如果我在模板本身中执行{{user}}，但是如果我尝试以计算的，安装的或任何方法访问this.user，则此方法也将得到一个空对象。有什么理由吗？我在这里缺少简单/明显的东西吗？

任何帮助将不胜感激！这是我的完整代码：

app.js：

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>

baseSettings.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.js：

import { mapActions, mapState } from 'vuex';

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

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

index.js

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,
});

非常感谢！

Answer 1

这似乎是一个未兑现的承诺问题。

您可以同时进行以下操作：检索getAllSettings()，并尝试在同一生命周期步骤中彼此独立地访问$store。因此，当您尝试从那里访问数据时，并不能保证Axios调用已经报告了数据并将其保存到存储中（在运行时导致空对象）。

但是，由于一旦因变量更改，计算出的属性就会重新运行，它将在您的组件中显示正确，因为这发生在mounted()生命周期步骤之后，即Axios调用已通过。

努力访问vuex状态

1 个答案: