为什么使用持久化
目的: 让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。
在开发的过程中，像用户信息（名字，头像，token）需要vuex中储存且需要本地储存
再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页面需要储存在本地
使用步骤
1. 首先
我们需要安装一个vuex的插件vuex-persistedstate来*支持vuex的状态持久化
npm i vuex-persistedstate
2. 然后
在src/store 文件夹下新建 modules 文件，在 modules 下新建 user.js 和 cart.js和category.js 三个模块。 (根据项目需求创建)
3.继续：
在 src/store/index.js 中导入 user cart 模块。
import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'
4. 最后：
使用vuex-persistedstate插件来进行持久化
import { createStore } from 'vuex'
// 引入vuex持久化方法createPersistedState
import createPersistedState from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'
export default createStore({
state: {},
mutations: {},
actions: {},
getters: {},
modules: {
// 模块化数据
user,
cart,
category
},
plugins: [
// veux持久化配置
createPersistedstate({
key: 'rabbitstore-client',
paths: ['user', 'cart']
})
]
})
说明
注意：
===> 默认是存储在localStorage中
===> key是存储数据的键名
===> paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如user.token
===> 修改state后触发才可以看到本地存储数据的的变化。
属性
对象中的属性：
key <String>：用于存储持久状态的密钥。默认为vuex。
paths <Array>：任何路径的数组，以部分保留状态。如果未给出路径，则完整状态将保留。如果给定一个空数组，则不会保留任何状态。必须使用点表示法指定路径。如果使用模块，请包括模块名称。例如：“ auth.user”默认为undefined。
reducer <Function>：将根据给定路径调用以减少状态持久化的函数。默认值包括这些值。
subscriber <Function>：一个用于设置突变订阅的函数。默认为store => handler => store.subscribe(handler)。
storage <Object>：代替（或结合）getState和setState。默认为localStorage。
getState <Function>：将被调用以恢复先前持久状态的功能。默认使用storage。
setState <Function>：将被调用以保持给定状态的函数。默认使用storage。
filter <Function>：一个将被调用以过滤setState最终将在存储中触发的任何突变的函数。默认为() => true。
overwrite <Boolean>：补液时，是否getState直接用输出结果覆盖现有状态，而不是用合并两个对象deepmerge。默认为false。
arrayMerger <Function>：补充状态时合并数组的功能。默认为function (store, saved) { return saved }（保存状态替换提供状态）。
rehydrated <Function>：补液完成后将被调用的函数。当您使用Nuxt.js时，该功能非常有用，持久化状态的恢复是异步发生的。默认为store => {}
fetchBeforeUse <Boolean>：一个布尔值，指示在使用插件之前是否应从存储中获取状态。默认为false。
assertStorage <Function>：确保插件可用的可重写功能，会在插件初始化时触发。默认情况下，是在给定的Storage实例上执行Write-Delete操作。请注意，默认行为可能会引发错误（如DOMException: QuotaExceededError）。
网友评论