在VUE项目中,我们会遇到页面一刷新个人信息丢失的问题。那么该如何解决呢?下面是我的一些答案。
1.使用浏览器的 localStorage 或 sessionStorage:
localStorage
用于长期存储数据,即使浏览器关闭后数据也不会丢失。sessionStorage
类似于localStorage
,但其中的数据仅在会话期间保存,在浏览器窗口关闭后会被删除。
示例代码如下:
// 存储数据
window.localStorage.setItem('userInfo', JSON.stringify(userInfo));
// 获取数据
const userInfo = JSON.parse(window.localStorage.getItem('userInfo'));
2.使用 Vuex 进行状态管理:
- 如果你使用了 Vuex,可以在 Vuex store 中保存用户信息,并监听页面的刷新事件,将数据存入
localStorage
,然后在应用启动时从localStorage
恢复数据。
首先封装storage 存储模块:
// 约定一个通用的键名
const INFO_KEY = 'userInfo'
// 获取个人信息
export const getInfo = () => {
const defaultObj = { token: '', userId: '' }
const result = localStorage.getItem(INFO_KEY)
return result ? JSON.parse(result) : defaultObj
}
// 设置个人信息
export const setInfo = (obj) => {
localStorage.setItem(INFO_KEY, JSON.stringify(obj))
}
// 移除个人信息
export const removeInfo = () => {
localStorage.removeItem(INFO_KEY)
}
然后,创建user.jx文件,将数据存入vuex的同时也存入本地:
import { getInfo, setInfo } from '@/utils/storage'
export default {
namespaced: true,
state () {
return {
// 个人权证相关
userInfo: getInfo()
}
},
mutations: {
setUserInfo (state, obj) {
state.userInfo = obj
setInfo(obj)
}
},
actions: {},
getters: {}
}
3.使用插件vuex-persistedstate
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const state = {};
const mutations = {};
const actions = {};
const store = new Vuex.Store({
state,
mutations,
actions,
plugins: [
createPersistedState({
storage: window.sessionStorage, // 存储方式:localStorage、sessionStorage、cookies
key: "store", // 存储的 key 的key值
paths: ['userInfo'], // 选择要持久化的状态
// render(state) {
// return { ...state }; // 要存储的数据:本项目采用es6扩展运算符的方式存储了state中所有的数据
// }
})
]
});
export default store;
关键配置:
- plugins: Vuex 的插件列表。
- createPersistedState: 使用
createPersistedState
插件来持久化 Vuex 中的状态。- storage: 设置存储类型,默认为
window.localStorage
,这里设置为window.sessionStorage
,这意味着数据会在浏览器会话结束时清除。 - key: 设置存储在浏览器中的 key 的名称,这里设置为
"store"
。 - paths: 指定要持久化的 state 属性路径,例如
['userInfo']
表示只将userInfo
状态持久化。 - render(state): 该方法用于指定哪些 state 数据应该被持久化,但是在这个例子中注释掉了这部分代码,因为使用了
paths
配置。如果未使用paths
,那么可以通过render
方法来控制要持久化的状态。
- storage: 设置存储类型,默认为
- createPersistedState: 使用