目录
一、Vuex为什么要持久化?
原因：因为Vuex是基于内存，存在内存里面的，刷新网页之后就没有了，不会持久化储存
解决方案：以token举例(存储登录信息)
实现思路：只要Vuex中的数据发生变化，就自动往本地同步一份
二、vuex持久化实现步骤
1. 安装
1）安装一个vuex的插件 vuex-persistedstate 来支持vuex的状态持久化
// npm安装命令:
npm i vuex-persistedstate --save
// yarn安装
yarn add vuex-persistedstate注意: 该插件应是生产依赖包, 所以要 -S
在package.json中
2. 配置仓库store
2）在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js
import Vue from 'vue'
import Vuex from 'vuex'
import loginModule from './modules/loginModule'
import createPersistedstate from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
loginModule
},
plugins:[
createPersistedstate({
key:'user',// 存数据的key名 自定义的 要有语义化
// paths: ['loginModule'] // 要把那些模块加入缓存
})
]
})
三、存储不同模块数据
1. 获取指定模块state数据
2. 获取全局state和模块数据
3. 只存储state全局数据
四、API方法
createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：
key ：存储持久状态的键。（默认：vuex）
paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）
reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。
subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
storage ：而不是（或与）getState和setState。默认为localStorage。
getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。
setState ：将被调用来保持给定状态的函数。默认使用storage。
filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true