关于vuex状态持久化的问题解决方案

关于vuex状态持久化的问题解决方案

在我们vue项目中，经常会用到关于vuex的状态管理。可是我们在刷新页面的时候，悲剧的发现我们之前保存的状态都没有了。

那们我们怎么样来实现状态的管理呢？怎么持久化呢？

在查找很多资料后，大多数的帖子都是写的是使用注册事件的方式，来解决，比如：

原理如下：、

1、app.vue中注册监听页面刷新事件

2、在页面刷新之前要将state 对象进行转json字符串处理。

3、当页面刷新后，在将sessionStore中的state对象进行转对象处理，将state对象与sessionstore中state对象进行合并

但是在实际的效果测试中性能和效果并没有想象中的完美，总是有点小bug

今天，我在这里给大家介绍一款很使用vuex状态管理持久化的插件。

vuex-persistedstate

安装方式：

npm install vuex-persistedstate --save

使用方式：

import createPersistedState from 'vuex-persistedstate'

注册插件：

plugins: [createPersistedState({ storage: window.sessionStorage })]

差数介绍：

storage: window.sessionStorage

这里指定使用sessionStoreage的方式进行持久化，如果不指定，默认使用localStoreage的方式进行持久化

具体实例：

import Vue from 'vue'
import Vuex from 'vuex'
import user from '@/store/modules/user'
import app from '@/store/modules/app'
import getters from '@/store/getters'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user,
    app
  },
  getters,
  plugins: [createPersistedState({ storage: window.sessionStorage })]
})