Vuex状态管理持久化问题解决

在单页应用中Vue项目集成Vuex也就足够基本使用了，但是刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、AccessToken、主题配置等。

这里就需要vuex-persistedstate，他可以把数据保存到localStorage或者Cookie

安装vuex-persistedstate

npm install vuex-persistedstate --save

配置vuex-persistedstate

在store/index.js中使用

import Vue from 'vue'
import Vuex from 'vuex'
import ThemeStore from './ThemeStore'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    Theme: ThemeStore
  },
  plugins: [createPersistedState()]
})

这样就集成成功了，默认情况下，使用localStorage作为存储。

部分持久化

目前集成后，vuex-persistedstate默认会把所有state都保存到localStorage之中，其实对于大部分页面来讲，需要store存储的数据很多，但是需要持久化到localStorage的数据并不多，而且localStorage存储大量数据也不合适，因此我们可以自定义部分数据持久化，部分数据只在页面上使用。

vuex-persistedstate提供有一个reducer函数，可以自定义存储Key，或者使用paths参数，建议使用paths参数比较简单

// 非Module格式：xxxx
// 使用了Module的格式：ModuleName.xxxx，这里持久化的是Theme Module下面的persistData数据
const PERSIST_PATHS = ['Theme.persistData']
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    Theme: ThemeStore
  },
  plugins: [createPersistedState({
    paths: PERSIST_PATHS
  })]
})

这就算集成完成了，需要持久化的数据手动添加到PERSIST_PATHS中就可以了。