Vuex实现数据持久化，数据刷新消失解决方案

在开发中，有一些全局数据，比如用户数据，系统数据等。这些数据很多组件中都会使用，我们当然可以每次使用的时候都去请求，但是出于程序员的“洁癖”、“抠”等等优点，还是希望一次请求，到处使用。

这时候很自然的想到存储在 localStorage 中，但是有个问题是，这些数据可能会变，如果没能及时同步的话，就会用到不正确的数据，即使做了数据同步，但是 localStorage 中的数据不是响应式的，不能自动更新使用到这些数据的地方。这时候就想要开始使用 vuex 了。

但是在使用 vuex 的时候也遇到很多问题，比如，“一刷新就没啦”：

vuex 的数据是存储在浏览器维护的内存中，页面刷新会重新初始化，简单的说，就是没了。
localStorage 的数据是存储在浏览器维护的一个简单数据库里面，在本地文件中存储，所以可以“持久化”存在。
所以“一刷新就没啦”是很正常的。

下面就是解决的方案

首先第一种

使用localStorage 来进行存储，但是这样有一个问题
我们的数据是会更新的，但是我们如果存进localStorage里，就无法实时更新我们的数据，
哪怕我们真的做了数据同步，他的数据也不是响应式的，所以这个方法不建议使用！

第二种 使用vuex的插件 来解决

使用vuex-persistedstate
首先我们先安装这个插件

npm i -S vuex-persistedstate

配置使用

在vuex初始化的时候作为组件去引入
默认持久化所有state

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [createPersistedState({
		    key: 'rootPersisted',
		    // storage: window.sessionStorage,  //不写，默认是localstorage
		    reducer (options) {
		      return {
		       // 要持久化的数据
		      }
		    }
	})]
})	  	

还有一种就是使用cookie的时候

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

export default new Vuex.Store({
  // ...
  plugins: [
    persistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

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要是一个一维数组不然会解析错误

API

createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

key ：存储持久状态的键。（默认：vuex）

paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer ：一个函数，将被调用来减少基于给定的路径持久化的状态。默认包含这些值。

subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage ：而不是（或与）getState和setState。默认为localStorage。

getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

setState ：将被调用来保持给定状态的函数。默认使用storage。

filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true