Как установить состояние (и сохранить после перезагрузки) в Vuex с помощью мутации?

Question

В настоящее время я выполняю часть аутентификации входа в систему веб-приложения с использованием Vue.js / Vuex и Laravel PHP.

После успешной аутентификации я хочу вызвать свой userObject из бэкэнда (атрибуты включают в себя: email, role_id и т. д.) и показывают определенные атрибуты во внешнем интерфейсе (компонент navbar).

Я проверил localStorage и там хранится userObject, но, похоже, он не передан в мое хранилище (currentUser) (Инструменты vue dev показали, что currentUser {} пуст)

Ниже приведены мои коды:

store.js

import Vue from 'vue';
import Vuex from 'vuex';
import Api from './_services/Api.js';

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    currentUser: {},
  },
  mutations: {

    SET_CURRENT_USER(state, user) {
      state.currentUser = user;
      window.localStorage.currentUser = JSON.stringify(user);
    },
    LOGOUT_USER(state) {
      state.currentUser = {}
      window.localStorage.currentUser = JSON.stringify({});
    }
  },
  actions: {
    logoutUser({commit}) {
      commit('LOGOUT_USER')
    },
    async loginUser({commit}, loginInfo) { //store.js
      console.log(loginInfo)

      try {

      let response = await Api().post('/login', loginInfo);
      console.log(response)

      let user = response.data.user;
      console.log(user)

      commit('SET_CURRENT_USER', user);
      console.log(JSON.parse(window.localStorage.currentUser));
      return user;


    } catch {

      return {error: "Email / Password combination was incorrect or unrecognized by the system. Please try again."}

    }


    }
  }
})

navbar.vue

<template>
    <nav>
<v-toolbar app :fixed="toolbar.fixed" :clipped-left="toolbar.clippedLeft" color="black">
<v-toolbar-side-icon class= "white--text" @click.stop="toggleMiniDrawer"></v-toolbar-side-icon>
<v-toolbar-title class="text-uppercase white--text" >
<v-btn flat to="/dashboard">
  <h1 class="font-weight-black display-1 white--text" >Activities</h1>

</v-btn>
</v-toolbar-title>
<v-spacer></v-spacer>
<h1 class="font-weight-regular title white--text">{{currentUser.name + ', ' + currentUser.email}}</h1>
</v-toolbar>

<v-list-tile @click="logoutUser">
    <v-list-tile-action>
      <v-icon class="black--text">exit_to_app</v-icon>
         </v-list-tile-action>
        <v-list-tile-content >
        <v-list-tile-title class="black--text">Logout</v-list-tile-title>
    </v-list-tile-content>
</v-list-tile>
</v-flex>
</v-list>

</v-navigation-drawer>
</nav>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex';

export default {
  data(){
    return{
    }
    },
    methods: {
      logoutUser () {
        this.$store.dispatch("logoutUser");
      }
      },
    computed: {
      ...mapState(['currentUser'])
    }
};

</script>

Я пытался явно поместить данные в currentUser {} в store.js

currentUser{name: 'Test', email: 'test@mail.com'}

и он успешно отображается в панели навигации.

Это привело меня к выводу, что я не смог успешно перевести userObject из 'user' в 'currentUser {}', или, скорее, он не сохраняетсяпосле перезагрузки.

Спасибо!