欢迎观看个人B站视频讲解Vue
https://space.bilibili.com/482859959?spm_id_from=333.1007.0.0
目录
一、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