Vuex持久化插件-解决刷新数据消失的问题

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据持久化，也可以通过插件-vuex-persistedstate。

1. 手动利用HTML5的本地存储

方法

vuex的state在localStorage或sessionStorage或其它存储方式中取值在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。这样state就会和存储一起存在并且与vuex同步

问题

最直观的就是，手动写比较麻烦。

2. 利用vuex-persistedstate插件

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法

2.1 使用方法

安装

npm install vuex-persistedstate --save

引入及配置在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

默认存储到localStorage

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

想使用cookie同理默认持久化所有state

想使用cookie同理

2.2 默认持久化所有state

2.3 指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的assessmentData
          assessmentData: val.assessmentData
        }
     }
  })]

2.4 vuex引用多个插件的写法

譬如：vuex提示的插件和持久化的插件一起使用，配置如下

vuex引用多个插件的写法譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一个一维数组不然会解析错误

解决使用vuex刷新页面state数据消失

在实际的vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。

Vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
Vuex劣势：在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

实际问题： 在vue项目中，使用Vuex做状态管理时，调试页面时，刷新后state上的数据消失了，该如何解决？

解决思路： 将state中的数据放在浏览器sessionStorage和localStorage

解决办法：存储到localStorage

通过监听页面的刷新操作，即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息,在App.vue中加入下面代码

created(){
    //在页面刷新时将vuex里的信息保存到localStorage里
        window.addEventListener("beforeunload",()=>{
            localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
        })
        
    //在页面加载时读取localStorage里的状态信息
        localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
  }

使用vuex-persistedstate 插件

安装插件： npm install vuex-persistedstate --save

配置： 在store的index.js中，手动引入插件并配置

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

该插件默认持久化所有state，当然也可以指定需要持久化的state：

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(data) {
          return {
          // 设置只储存state中的myData
          myData: data.myData
        }
     }
  })]

vuex插件持久存储