Vue - Vuex 中的数据持久化存储，刷新页面时 store 中的存储的数据不丢失

Vuex 的使用：https://blog.csdn.net/Jie_1997/article/details/107228246
Vuex 中 store 保存的数据，刷新页面时会清空，如何解决刷新页面时 store 中存储的数据不丢失？

一. 无需插件实现

1. 更改 store.js 文件 state 的定义：
   

   state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
     userData: {}
   },
   

2. 在 App.vue 中添加：
   

   mounted() {
     window.addEventListener('unload', this.saveState)
   },
   methods: {
     saveState() {
       sessionStorage.setItem('state', JSON.stringify(this.$store.state))
     },
   },
   

二. 使用 vuex-persist 插件实现

1. 安装 vuex-persist
   npm install vuex-persist --save

2. 引入vuex-persist

    import VuexPersist from 'vuex-persist'
   

3. 创建对象，借助浏览器缓存，存入localStorage

   const vuexLocal = new VuexPersist({
       storage: window.localStorage  // 可选存储方式
   })
   

4. vuex.Store 中引入该插件

   plugins: [vuexLocal.plugin]
   

5. 一个实例：
   

   import Vue from 'vue'
   import Vuex from 'vuex'
   Vue.use(Vuex)
   
   // 引入vuex-persist
   import VuexPersist from 'vuex-persist';
   // 创建对象，借助浏览器缓存，存入localStorage
   const vuexLocal = new VuexPersist({
       storage: window.localStorage  // 可选存储方式
   })
   
   export default new Vuex.Store({
       state: {
           id: 1
       },
       mutations: {
           editId(state, id) {
               state.id = id
           }
       },
       // 引入 vuex-persist 插件
       plugins: [vuexLocal.plugin]
   })