在Vue中使用Vuex進(jìn)行狀態(tài)管理時(shí),如果需要將某些數(shù)據(jù)進(jìn)行持久化處理,可以使用localStorage來存儲(chǔ)和獲取數(shù)據(jù)。下面是一個(gè)示例:
首先,在src/utils文件夾下創(chuàng)建storage.js文件,用于封裝localStorage的操作:
// 約定一個(gè)通用的鍵名 const INFO_KEY = 'hm_shopping_info' // 獲取個(gè)人信息 export const getInfo = () => { const defaultObj = { token: '', userId: '' } const result = localStorage.getItem(INFO_KEY) return result ? JSON.parse(result) : defaultObj } // 設(shè)置個(gè)人信息 export const setInfo = (obj) => { localStorage.setItem(INFO_KEY, JSON.stringify(obj)) } // 移除個(gè)人信息 export const removeInfo = () => { localStorage.removeItem(INFO_KEY) }
然后,在store中的JavaScript文件中導(dǎo)入并調(diào)用這些方法:
import { getInfo, setInfo } from '@/utils/storage' // 通過getInfo方法獲取持久化的個(gè)人信息 const info = getInfo() // 在需要的地方使用setInfo方法進(jìn)行持久化存儲(chǔ) setInfo({ token: 'xxxx', userId: 'xxxx' })
通過調(diào)用getInfo方法,可以獲取之前存儲(chǔ)的個(gè)人信息。而通過調(diào)用setInfo方法,可以將新的個(gè)人信息進(jìn)行持久化存儲(chǔ)。
請(qǐng)注意,這只是一個(gè)簡(jiǎn)單的示例,你可以根據(jù)自己的需求進(jìn)行適當(dāng)?shù)男薷暮蛿U(kuò)展。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)