vuex持久化插件（vuex-persistedstate）

搭建项目时，考虑到后面要保存vuex仓库里的东西，但是vuex是不会自动保存的，一刷新就没了，所以得想办法保存下来到本地，这样就可以数据持久化。
通过本地存储的方式将vuex保存到本地

我们可以手动的将vuex仓库里的数据存储到本地localStorage或者session Storage，或者是其他的存储方式，
这样即使刷新了页面，vuex的数据消失了，我们还是可以通过从本地local Storage里获取数据出来使用。
当然，在mutation定义的方法里，对vuex的状态操作的同时，也会同步到local Storage。

利用vuex-persistedstate插件

插件的原理其实也是结合了本地local Storage或其他存储的方式，只是通过统一的配置就不再需要手动的，每次都去写存储的方法。很方便。

插件vuex-persistedstate的使用方法：
通过npm下载安装：

npm install vuex-persistedstate --save

引入及配置：
在store文件夹下的index.js文件中引入

import createPersistedState from 'vuex-persistedstate';
const store = new Vuex.Store({
	//...
    plugins: [createPersistedState()]  // 默认存储到本地local Storage里
})

默认存储到本地local Storage里，可以通过下方配置修改存储位置
想要存储到session Storage，配置如下

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

想存储到cookie同理
上面的配置都是默认持久化所有的state数据，cookie的就不讲了，下面来讲一下指定持久化的state的配置
指定持久化的state数据，配置如下

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

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必须是一个一维数组，不然会解析报错的。