VuexのデータをlocalStorageに保存する（ログイン状態の保持）

検索で来た方はこちらのページが綺麗にまとまっていて分かりやすいです。

pizzamanz.net

大変便利なVuexですが、ストア内のstateはブラウザをリロードすると初期化されてしまいます。
ログイン機能を実装しても、ブラウザが更新されるたびにログアウトしたような状態になるということです。


vuexのプラグインであるvuex-persistedstateを使うことで、webブラウザのローカルストレージ(localStorage)にデータを保存することができます。

npm install vuex-persistedstate --save

まず、準備としてstore.js内のstateを変数に格納します。
store.js

export const initialState = {   
  userData: { 
    id: '',
    name: '',
    mail: '',
  },
}

export const store = new Vuex.Store({
  state: initialState,  
  mutations: {},
  actions: {},
  getters: {},
   plugins: [createPersistedState()]  // これも追記する

plugins: [createPersistedState()]によってstoreにvuex-persistedが導入されます。

これでstateのデータが自動でlocalStorageに保存されるようになります。
ただ、ログアウト時にはデータを初期化する必要があるため、以下の方法を取ります。


main.js

import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
import store from './store'
import router from './router'
import firebase_config from './firebase'
import { initialState } from './store'; //追加

 document.addEventListener('DOMContentLoaded', () => {
   const app = new Vue({
     el: '#potatoSNS',
     router: router,
     store,
     render: h => h(App),
     created() {
      // created時に空のinitialStateをlocalStorageに保存しておく。
     localStorage.setItem('initialState', JSON.stringify(initialState));
     }
   })
 })

store.js

  mutations: {

    //  initialStateをstateとして上書きする（初期化）処理
    RESET_VUEX_STATE(state) {
      Object.assign(state, JSON.parse(localStorage.getItem('initialState')));
    },

 }以下略

コンポーネントのログアウトボタンをクリックした時にこのRESET_VUEX_STATEを実行させ、stateを初期化することでログアウトさせます。

参考リンク

【Vuex】リロードしてもStateの中身を消さずに維持する方法 | Pizzamanz.net