Блог

У меня есть 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
 

может кто-нибудь сказать мне, что здесь не так? Спасибо за любую помощь!

Мне кажется, что ваше действие асинхронно, и данные могут быть недоступны получателю при визуализации вашего компонента.

Вы можете попробовать превратить свое действие в действие asyn, которое возвращает обещание, и подождать, пока оно разрешится, beforeEach прежде чем звонить next .

Попробуйте отладить приложение после обновления. Посмотрите в хранилище vue, запишите значение текущего пользователя в компоненте mount и т. Д…