发布时间:2023-09-10 10:30
前端开发经常需要用到采用 Vuex 来缓存当前会话信息,会话信息当页面刷新,浏览器关闭 信息就会丢失;
很多时候需要将当前会话缓存信息持久化存储到本地长久保存,可用通过localStorage手动操作:
localStorage.getItem(key),//获取本地存储
localStorage.setItem(key, value),//本地存储
localStorage.removeItem(key) //删除
如果有一种方法可以将 Vuex 的缓存信息自动持久化保存到本地,以及在浏览器刷新重新打开的时候,自动获取本地存储内容还原 Vuex 会话缓存信息 简直不要太舒服;
1、项目安装插件:npm install vuex-persistedstate --save
2、状态类展示:store/modules/userinfo.js
// 1、存放用户基础信息
const state = {
Id: 0, // 用户编号
Name: \'\' // 姓名昵称
}
// 2、状态格式化访问输出
const getters = {}
// 3、存放更新状态数据相关的方法
const mutations = {
SET_B_NAME(state, payload) {
state.bName = payload.name;
}
// 外部直接赋值后 通过提交内部状态更新方法 触发持久化插件保存数据;
// 调用mutations 中的任何方法都会触发会话持久化保存,本方法用于其他地方跳过mutations 直接修改state值的时候,附加调用一次这个空方法达到触发效果
//import Store from \'@/store/index\'
//Store.state.UserInfo.Name=\"xxx\"
//Store.commit(\'UserInfo/RefreshLocalStorage\')
RefreshLocalStorage() {},
}
// 4、异步请求数据 调用mutations同步更新状态
const actions = {
// ASYNC_SET_NAME({ state, commit, rootState }, payload) {
// setTimeout(() => {
// state.bName = \'asyncName\'
// }, 4000)
// }
}
export default {
namespaced: true, // 必须要有
state,
getters,
mutations,
actions,
}
3、添加缓存本地化支持:store/index.js
import Vue from \'vue\'
import Vuex from \'vuex\'
// 用于配合状态管理将数据持久化到 LocalStorage 根目录执行:cnpm install vuex-persistedstate --save
import CreatePersistedState from \'vuex-persistedstate\'
import getters from \'./getters\'
import app from \'./modules/app\'
import settings from \'./modules/settings\'
import UserInfo from \'./modules/userinfo.js\'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
TokenInfo,
UserInfo
},
getters,
//方法1:经测试可行 自动命名 前端只管通过对象进行取值 赋值 这里自动进行key value存储
// plugins: [CreatePersistedState()]
//方法2:自定义
plugins: [CreatePersistedState({
// 持久化存储的关键字key 自定义即可
key: \"Vuex_PersistentStorage\",
// [\'LoginInfo\',\'UserInfo\']要持久化的状态,在state里面取,如果有嵌套,可以 a.b.c
paths: [\'UserInfo\', \'TenantInfo.TaskInfo\'],
// 存储方式定义
storage: {
getItem: (key) => localStorage.getItem(key), // 获取
setItem: (key, value) => localStorage.setItem(key, value), // 存储
removeItem: (key) => localStorage.removeItem(key) // 删除
}
})]
})
export default store
4、触发持久化存储方法1:
调用状态类内部的 Mutations 方法 自动触发持久化存储
this.$store.dispatch(‘user/login’, this.loginForm)
5、触发持久化存储方法2:
个人觉得状态内部的 Mutations 及 Actions 方法好蠢 非人类 简单的事情复杂化,直接访问不香吗?
直接访问操作属性方便快捷但是不会触发 persistedstate 插件自动持久化
需要附加一条额外语句:Store.commit(‘UserInfo/RefreshLocalStorage’)
import Store from \'@/store/index\'
Store.state.UserInfo.Name=\"xxx\"
//额外附加一个 Mutations 空方法调用即可
Store.commit(\'UserInfo/RefreshLocalStorage\')
讲道理 这种自带的 Mutations 和 Actions 写法 真的好蠢 好恶心人 看着就头大,状态存储类里面还要加业务逻辑去调用接口 不知道vue-element-admin 是怎么思考的,打死我都不想这种操作。