vuexデータはローカルに格納されます

前言:
vuexはグローバルなステータス管理を行うことができますが、リフレッシュ後にデータが消え、ページをリフレッシュした後もデータが存在することを望んでいます.つまり、ローカルで永続的に保存されることを望んでいます.
実装方法は2つあり,1つはプラグイン,2つはHTML 5のローカルストレージを手動で利用することであり,前者が便利であることは明らかである.
方法1:
vuex-persistedstateプラグインの使用(デフォルトはlocalStorageに格納)
手順:
(1)取付

npm install vuex-persistedstate  --save

(2)store.jsに導入

import Vue from 'vue';
import Vuex from 'vuex';
//Add this line
import createPersistedState from "vuex-persistedstate"

Vue.use(Vuex);

export default new Vuex.Store({
  //Add this line
  plugins: [createPersistedState()],
  state: {
    lists: [],
  },
  mutations: {
    addItem(state,value){
      state.lists.push(value)
    },
  },
  actions: {

  },
});

方法2:
VuexでのlocalStorageの使用
 
参考記事:1.localStorageの使用紹介
                  2.Vuex永続化プラグイン-リフレッシュデータの消失の問題を解決