在Vue中使用Vuex进行状态管理时,如果需要将某些数据进行持久化处理,可以使用localStorage来存储和获取数据。下面是一个示例:
首先,在src/utils文件夹下创建storage.js文件,用于封装localStorage的操作:
// 约定一个通用的键名
const INFO_KEY = 'hm_shopping_info'
// 获取个人信息
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)
}然后,在store中的JavaScript文件中导入并调用这些方法:
import { getInfo, setInfo } from '@/utils/storage'
// 通过getInfo方法获取持久化的个人信息
const info = getInfo()
// 在需要的地方使用setInfo方法进行持久化存储
setInfo({ token: 'xxxx', userId: 'xxxx' })通过调用getInfo方法,可以获取之前存储的个人信息。而通过调用setInfo方法,可以将新的个人信息进行持久化存储。
请注意,这只是一个简单的示例,你可以根据自己的需求进行适当的修改和扩展。