时间戳

首页 > 解决方案 > 刷新页面后Vuex无法读取属性

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

问题描述

Navbar当我在他中使用来自 Vuex 商店的值时，我有一个组件。在进入每条路线之前，我从 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

有人可以告诉我这里有什么问题吗？谢谢你的帮助！

标签： javascripthtmlcsstypescriptvue.js

解决方案

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

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

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

推荐阅读