veux--頁面重新整理更新後資料狀態無法儲存問題
阿新 • • 發佈:2018-11-25
以登陸退出為例,我這裡使用的是sessionStorage去處理
(具體用localStorage(手動清除,資料消失)還是sessionStorage(會話視窗關閉,資料消失),可根據具體需求而定,處理方法流程同)
1.在改變state時候改變sessionStorage裡面的值,使其值與state中更新後的值一致
//loginState傳入true與false判定執行登陸還是退出 const mutations = { alterLogin(state,loginState){ if(loginState){ sessionStorage.setItem('isLogin',true) }else{ sessionStorage.removeItem('isLogin') } state.isLogin=loginState } }
2.getters去取定義好的狀態值,並在元件中使用
//元件中使用getters進行資料獲取
const state={
isLogin:false
}
const getters = {
getLogin(state){
if (!state.isLogin) {
state.isLogin=sessionStorage.getItem('isLogin')
}
return state.isLogin
}
}
遇到問題:
1.取出資料"[Object Object]",解決如下
sessionStorage以及localStorage只能儲存字串,設定物件格式資料時候記得進行序列化;使用時進行反序列化,示例如下:
//序列化存入
sessionStorage.setItem('userData',JSON.stringify(loginState.userdata))
//反序列化取出
JSON.parse(loginState.userdata)
這樣,再試試一下,OK啦!