将对象提交到 vuex 中的状态

Question

我正在尝试通过 $store.commit('fetchFunction', response.data) 从 axios 响应中获取对象。我需要 computed out in App.vue（根组件）以将数组 "globally" 存储在 SPA (vue-router) 中。这就是我得到的。

auth.js

axios.get('/api/to/userController/id')
    .then(response => {

    //this is a nice json
    console.log(response.data.data);
    app.$store.commit('userProfile', response.data.data)
    })
    .catch(error => {

    console.log(error);
    });

store.js

state: {
    userProfile: {}
},
mutations: {
    userProfile (state, payload) {
        state.userProfile = payload;
    }
},
getters: {
    userProfile: state => {

    //this is [__ob__: Observer] lenght: 0
    console.log(state.userProfile)}
    return state.userProfile;
}

App.vue

created() {

    //this is filled with the observer from store.js - Until reload page!
    //after reload page - it is null!
    console.log();
},
computed: {

    userProfile() {
        return this.$store.getters.UserProfile;
    }
}

我的实际问题是，如果我更改路线或重新加载页面，该对象将成为观察者并且 store 不会存储它。我以前有几乎相同的功能，只是 true 和 false（我用 JWT Token 处理身份验证的状态），它就像一个魅力。我的问题是以一种很好的方式传递对象。

Answer 1

使用SessionStorage通过路线变化跟踪变化。

将对象提交到 vuex 中的状态

Commit objects to state in vuex

javascript

ecmascript-6

vue.js

axios

vuex

auth.js

store.js

App.vue