使用環境
vue: ^2.5.7
vuex: ^3.0.1
vuex-persistedstate: ^2.5.4

データの永続化について

JavaScriptでログイン情報を保持するには基本的にはローカルに保存する仕組みを作る必要があります。
ローカルに保存する仕組みとしてはクッキーが有名ですが、最近ではWebStorageを利用するのが一般的なようです。
WebStorageの中でもlocalStorageとsessionStorageがありますが、localStorageはブラウザを閉じてもデータを保持するのに対して、sessionStorageはブラウザを閉じるとデータは破棄されます。
今回はブラウザのリロード時だけデータを保持したいのでsessionStorageを使用します。

vuex-persistedstate のインストール

vuex-persistedstate を使用すると簡単な設定だけでVuexのステート情報を保存することができます。
まずはNPMでインストールしましょう。

$ npm install vuex-persistedstate

ストアの設定

モジュール化されたauthストアがあるとします。
今回はこのstateのtokenをsessionStorageに保存します。

resources/js/store/modules/auth.js
const state = {
  token: ''
};


const mutations = {
  login (state, payload) {
    state.token = payload;
  },
  logout (state) {
    state.token = null;
  }
};


export default {
  namespaced: true,
  state,
  mutations
};

vuex-persistedstateの設定はVuex.Storeのpluginsに設定します。

resources/js/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate";
import auth from "./modules/auth";


Vue.use(Vuex);


export default new Vuex.Store({
  modules: {
    auth
  },
  strict: true,
  plugins: [createPersistedState({
    key: 'TodoApp',
    paths: ['auth.token'],
    storage: window.sessionStorage
  })]
});
keysessionStorageのキーとなりますので、他のアプリと被らないユニークな文字列にします。
paths保存するstateを指定します。
今回はauthモジュールのtokenなのでauth.tokenですね。
storageストレージの種類や動作を指定します。

以上で設定は完了です。
これで、auth.tokenが変更される度に自動的にsessionStorageも書き換えてくれます。

リロード時にsessionStorageを読み込む

最後にアプリ起動時にsessionStorageを読み込み、tokenをaxiosに設定する処理をします。
Laravelの環境だとグローバルでaxiosが使用できるので下記のようになります。

resources/js/app.js
if (sessionStorage.getItem('TodoApp')) {
  const strageData = JSON.parse(sessionStorage.getItem('TodoApp'));
  if (strageData.auth.token) {
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + strageData.auth.token;
  }
}

以上です。
vuex-persistedstateを使えば簡単にVuexのストアの永続化ができますね。

ここまでのソースコードはGithubに載せてあります。
LaravelTodoSPA

参考サイト
【Vuex】リロードしてもStateの中身を消さずに維持する方法