Vue.js Vuex-从状态获取值时未定义属性

我是Vue JS新手，在使用Vuex时，我遇到了一些问题。 我想要的是：更改对象的“用户”状态，并在导航栏中从“用户”状态显示“用户名”属性。我也在使用Vue路由器，在Router/index.js文件中，我正在提交状态的更改

My store/index.js文件：

import { createStore } from 'vuex'

export default createStore({
  state: {
    user: null
  },

  mutations: {
    SET_USER(state, user){
      state.user = user
    }
  },

  actions: {
    setUser({commit}, user){
      commit('SET_USER', user)
    }
  },

  modules: {
  }
})

import { createRouter, createWebHistory } from 'vue-router'
import users from '../assets/users'
import store from '../store'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // I have 2 more routes
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach(async(to, from, next) => {
  const user = store.state.user
  if(!user){
    await store.dispatch('setUser', users[0]) // getting the first user object from assets/users.js
  }
  
})

export default router

我的路由器/index.js文件：

import { createStore } from 'vuex'

export default createStore({
  state: {
    user: null
  },

  mutations: {
    SET_USER(state, user){
      state.user = user
    }
  },

  actions: {
    setUser({commit}, user){
      commit('SET_USER', user)
    }
  },

  modules: {
  }
})

import { createRouter, createWebHistory } from 'vue-router'
import users from '../assets/users'
import store from '../store'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // I have 2 more routes
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

router.beforeEach(async(to, from, next) => {
  const user = store.state.user
  if(!user){
    await store.dispatch('setUser', users[0]) // getting the first user object from assets/users.js
  }
  
})

export default router

My UserProfile.vue文件：

<template>
  <div class="nav">
    <h3 id="logo"><router-link to="/">Twooter</router-link></h3>
    <h3 id="username">{{ user.userName }}</h3>
  </div>
</template>
<script>
import {reactive, computed} from 'vue'
import {useStore} from 'vuex'

export default {
    name: 'UserProfile',
    setup(){
        const store = useStore()
        
        // computed
        const user = computed(() => store.state.user)

        return {
            user
        }
    }
}
</script>

特沃特
{{user.userName}
从“vue”导入{reactive，computed}
从“vuex”导入{useStore}
导出默认值{
名称：“UserProfile”，
设置（）{
const store=useStore（）
//计算
const user=computed（（）=>store.state.user）
返回{
用户
}
}
}

现在，当我在元素中调用{{user.userName}}时，我在控制台中得到以下错误和警告：

[Vue warn]: Unhandled error during execution of render function 
  at <UserProfile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <UserProfile onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

UserProfile.vue?4a39:4 Uncaught (in promise) TypeError: Cannot read property 'userName' of undefined
    at Proxy.render (eval at ./node_modules/cac   ....... And many other stuffs.

[Vue warn]：执行渲染函数期间未处理的错误
在>
在
在
[Vue warn]：执行计划程序刷新期间未处理的错误。这可能是一个Vue内部错误。请在https://new-issue.vuejs.org/?repo=vuejs/vue-下一个
在>
在
在
UserProfile.vue？4a39:4未捕获（承诺中）类型错误：无法读取未定义的属性“userName”
在Proxy.render（eval at./node_modules/cac…）和许多其他内容。

我使用的是Vue版本^3.0.0和Vuex版本^4.0.0-beta.4。 我已经使用“npm安装”安装了Vuexvuex@next--保存”命令，根据官方文件

---

任何帮助都将不胜感激。

我认为您需要使用ref（）方法，而不是对const用户进行计算，因为这正是setup（）变量“深度反应”的原因根据文档，我自己并没有尝试过这个，但请查看。查看这篇优秀的文章，了解如何使用composition api：