无法在vue组件中获取vuex状态

Question

我试图在用户登录后获取用户数据，但它返回Object而不是用户数组。

代码

App.js（主要组件）

<script>
    export default {
        data() {
            return {
                user: ''
            }
        },
        computed : {
            isLoggedIn() {
                return this.$store.getters.isLoggedIn
            }
        },
        methods: {
            logout: function () {
                this.$store.dispatch('logout')
                .then(() => {
                    this.$router.push({name: 'home'})
                })
            }
        },
        created: function () {
            this.user = this.$store.getters.loggedUser
            console.log('user data', this.$store.getters.loggedUser) //returns Object
        }
    }
</script>

Store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    status: '',
    token: localStorage.getItem('access_token') || '',
    user : {}
  },
  mutations: {
    auth_request(state){
        state.status = 'loading'
      },
      auth_success(state, token, user){
        state.status = 'success'
        state.token = token
        state.user = user
      },
      auth_error(state){
        state.status = 'error'
      },
      logout(state){
        state.status = ''
        state.token = ''
      },
  },
  actions: {
    login({commit}, user){
        return new Promise((resolve, reject) => {
          commit('auth_request')
          axios({url: '/api/auth/login', data: user, method: 'POST' })
          .then(resp => {
            const token = resp.data.access_token
            const user = resp.data.user
            localStorage.setItem('access_token', token)
            axios.defaults.headers.common['Authorization'] =  'Bearer ' + token
            commit('auth_success', token, user)
            resolve(resp)
          })
          .catch(err => {
            commit('auth_error')
            localStorage.removeItem('access_token')
            reject(err)
          })
        })
    },
    register({commit}, user){
        return new Promise((resolve, reject) => {
          commit('auth_request')
          axios({url: 'api/auth/register', data: user, method: 'POST' })
          .then(resp => {
            console.log('register data', resp);
            const token = resp.data.access_token
            const user = resp.data.user
            localStorage.setItem('access_token', token)
            axios.defaults.headers.common['Authorization'] =  'Bearer ' + token
            commit('auth_success', token, user)
            resolve(resp)
          })
          .catch(err => {
            commit('auth_error', err)
            localStorage.removeItem('access_token')
            reject(err)
          })
        })
      },
      logout({commit}){
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.state.token
        return new Promise((resolve, reject) => {
        axios({url: 'api/auth/logout', method: 'POST' })
          .then(resp => {
            commit('logout')
            localStorage.removeItem('access_token')
            localStorage.removeItem('token_type')
            delete axios.defaults.headers.common['Authorization']
            resolve()
          })
          .catch(err => {
            commit('logout')
            localStorage.removeItem('access_token')
            localStorage.removeItem('token_type')
            delete axios.defaults.headers.common['Authorization']
            reject(err)
          })
        })
      }
  },
  getters: {
    isLoggedIn: state => !!state.token,
    authStatus: state => state.status,
    loggedUser: state => state.user,
  }
});

export default store;

注意：基于this answer，我已将loggedUser: state => state.user,添加到getters中，但我得到的只是对象，一无所有 关于用户数据。

屏幕截图

问题

如何在组件中获取用户数据？

Answer 1

不是仅仅在value内部吗？

this.user.value

Answer 2

创建应用程序组件时，应在用户登录后获取用户信息。因为创建应用程序组件时您没有登录。

Answer 3

已解决

由于无法从vuex状态获取用户信息，我决定限制后端的用户数据并将其存储在localStorage中，这样我就可以从存储而不是vuex中获取用户数据。

代码

store.js

login({commit}, user){
    return new Promise((resolve, reject) => {
        commit('auth_request')
        axios({url: '/api/auth/login', data: user, method: 'POST' })
        .then(resp => {
        console.log(resp)
        const token = resp.data.access_token
        const user = resp.data.user
        console.log(user)
        localStorage.setItem('access_token', token)
        localStorage.setItem('user', JSON.stringify(user)) // added this line
        axios.defaults.headers.common['Authorization'] =  'Bearer ' + token
        commit('auth_success', token, user)
        resolve(resp)
        })
        .catch(err => {
        commit('auth_error')
        localStorage.removeItem('access_token')
        localStorage.removeItem('user')
        reject(err)
        })
    })
},

App.vue (main component)

我删除了created()函数，并添加了mounted()函数

mounted() {
    const user = JSON.parse(localStorage.getItem('user'));
    const state = user
        ? { status: { loggedIn: true }, user }
        : { status: {}, user: null };
        if(user){
            this.user = user.name
        } else {
            console.log('nothing')
        }
}

这样，我没有任何错误，既没有访客，也没有登录用户。另外，他们登录后，我也可以立即获得用户名。

希望对其他人有用。