刷新页面后Vuex无法读取属性

Posted 2023-02-22

【中文标题】刷新页面后Vuex无法读取属性

【英文标题】：Vuex cannot read property after refresh page

【发布时间】：2021-06-13 01:54:47

【问题描述】：

当我在他中使用来自 Vuex 商店的值时，我有一个 Navbar 组件。在进入每条路线之前，我从 vuex 运行调度，如下所示：

router.beforeEach((to, from, next) => 
   //...
   store.dispatch("updateUserData"); 
   next();
);

我的商店：

const actions = 
  updateUserData( commit ) 
    UserService.getUserData().then(
      (response) => 
        commit("updateUserState", response.data);
      ,
      (error) => 
    )
  ,


const mutations = 
  updateUserState: function(state, user) 
    state.user = user;
  ,


const getters = 
  getUser: (state) => 
    return state.user;
  

另外在我的Navbar 组件中我有这个：

  computed: 
    currentUser() 
      return this.$store.getters.getUser;
    
  ,

并像这里一样使用这个值：

<p style="border-left: 1px solid black" class="navIcon pl-4 py-1">
    currentUser.firstName   currentUser.lastName 
</p>

现在是问题，当我打开使用此navbar 的页面时，我的控制台和组件工作正常，一切正常，我正确渲染了视图，但刷新页面后，我仍然正确视图上的数据，但我的控制台向我抛出了这个错误：

vue.esm.js?a026:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'firstName' of null"

found in

---> <Navbar> at src/layouts/Navbar.vue
       <App> at src/App.vue
         <Root>
warn @ vue.esm.js?a026:628
vue.esm.js?a026:1897 TypeError: Cannot read property 'firstName' of null

谁能告诉我这里出了什么问题？感谢您的帮助！

【参考方案1】：

在我看来，您的操作是异步的，当您的组件呈现时，数据可能无法用于 getter。

您可以尝试将您的操作变成异步操作，这将返回一个承诺，并在调用 next 之前等待它在 beforeEach 中解决。

刷新后尝试调试您的应用。查看vue store，在组件mount等中记录当前用户的值...

【讨论】：

你能在这里展示一个使用异步的例子吗？