在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方法,可以将新的个人信息进行持久化存储。
请注意,这只是一个简单的示例,你可以根据自己的需求进行适当的修改和扩展。