vuex--使用vuex-persistedstate持久化保存数据及配置哪些state需要持久化存储

• vuex默认情况下数据存储在内存，刷新浏览器后数据变成初始状态
• vuex-persistedstate可以让vuex中的数据持久保存在sessionstorage或localstorage中，刷新后不会变成初始状态
• 引入依赖

	npm i -S vuex-persistedstate

• 使用

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  //...
  plugins: [persistedState()]
})

• vuex-persistedstate默认使用localStorage来存储数据，如果要使用sessionStorage:

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

• 如果要使用cookie:

1.引入
 npm i js-cookie
2.使用
 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)
       },
     })
   ]
 })

• 指定某个需要持久化的数据

 export default new Vuex.Store({
   //...
   plugins: [
     persistedState({
		//...
	   reducer(val){
         return {
           // 只储存state中的count
           count: val.count
         }
       }
     })
   ]
 })

• 指定modules模块需要持久化的数据

const test = {
  state: {
    name: 'moduleA',
    type: 'module A'
  },
}
 export default new Vuex.Store({
   modules: {
     test
   },
   //...
   plugins: [
     persistedState({
		//...
	   reducer(val){
         return {
           // 只储存modules中的test的name
           name: val.test.name
         }
       }
     })
   ]
 })