如何让vuex数据持久化

1.为什么要让vuex数据持久化

在使用vuex的时候，会发现刷新页面之后state中存储的数据会被重置，因为刷新浏览器的时候会导致整个页面重新加载，vuex的state也会全部重新加载，所以为了防止这类情况的发生，我们会将vuex中的数据进行本地存储，防止页面刷新丢失vuex中的数据。

2.如何将vuex中的数据持久化

1.我们需要安装一个插件，我们需要借助这个vuex-persistedstate插件进行持久化

// 安装依赖包
npm install vuex-persistedstate  --save

2.使用vuex-persistedstate插件来进行持久化

一.key是存储数据的键名(本地存储)

二.paths是state中那些需要被的数据，如果是模块下的数据，则在前面加上模块名称

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

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
    key: 'stort',
     可以写多个
    paths: ['userinfo', ......]
  	})
  ]
})

3.指定需要持久化的数据

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