如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題

更新時間：2023年05月17日 09:19:30 作者：鹿鹿鹿啦

這篇文章主要介紹了如何解決vuex在頁面刷新后數(shù)據(jù)被清除的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vuex在頁面刷新后數(shù)據(jù)被清除問題

原因

解決方法

localStorage沒有時間期限，除非將它移除，sessionStorage即會話，當瀏覽器關閉時會話結束，有時間期限，具有自行百度我這里使用sessionStorage，這里需要注意的是 vuex中的變量是響應式的，而sessionStorage不是，當你改變vuex中的狀態(tài)，組件會檢測到改變，而sessionStorage就不會了，頁面要重新刷新才可以看到改變，所以應讓vuex中的狀態(tài)從sessionStorage中得到，這樣組件就可以響應式的變化

具體實現(xiàn)

應用背景是用戶登入后保存狀態(tài)，退出后移除狀態(tài)

mutations.js

ADD_LOGIN_USER (state,data) {  //登入，保存狀態(tài)
        sessionStorage.setItem("username", data);  //添加到sessionStorage
        sessionStorage.setItem("isLogin",true);
        state.username=data,             //同步的改變store中的狀態(tài)
        state.isLogin=true
    },
    SIGN_OUT (state) {   //退出，刪除狀態(tài)
        sessionStorage.removeItem("username");  //移除sessionStorage
        sessionStorage.removeItem("isLogin");
        state.username=''                //同步的改變story中的狀態(tài)
        state.isLogin=false
    }

getters.js

isLogin (state) {
        if (!state.isLogin) {    
            state.isLogin=sessionStorage.getItem('isLogin');   //從sessionStorage中讀取狀態(tài)
            state.username=sessionStorage.getItem('username');
        }
        return state.username
    }

總體的實現(xiàn)思路是讓vuex中story的狀態(tài)和sessionStorage保持一致（從sessionStorage取值）

注意：

之前踩了一個大坑，沒注意到vuex可以讓組件響應式變化，讓組件直接取了sessionStorage的值，弄的我還必須刷新才能看到退出后的效果

vuex頁面刷新數(shù)據(jù)丟失的四種解決

為什么說刷新頁面vuex的數(shù)據(jù)會丟失

刷新頁面vuex的數(shù)據(jù)會丟失屬于正?，F(xiàn)象，因為JS的數(shù)據(jù)都是保存在瀏覽器的堆棧內存里面的，刷新瀏覽器頁面，以前堆棧申請的內存被釋放，這就是瀏覽器的運行機制，那么堆棧里的數(shù)據(jù)自然就清空了。

第一種方法用sessionStorage

將接口返回的數(shù)據(jù)保存在vuex的store里，也將這些信息也保存在sessionStorage里。注意的是vuex中的變量是響應式的，而sessionStorage不是，當你改變vuex中的狀態(tài)，組件會檢測到改變，而sessionStorage就不會了，頁面要重新刷新才可以看到改變，所以應讓vuex中的狀態(tài)從sessionStorage中得到，這樣組件就可以響應式的變化。

在store文件夾里面的js文件示例如下

const state = {
? authInfo: JSON.parse(sessionStorage.getItem("COMPANY_AUTH_INFO")) || {}
}
const getters = {
? authInfo: state => state.authInfo,
}
const mutations = {
? SET_COMPANY_AUTH_INFO(state, data) {
? ? state.authInfo = data
? ? sessionStorage.setItem("COMPANY_AUTH_INFO", JSON.stringify(data))
? }
}
//actions 模塊里無需使用 sessionStorage
export default {
? namespaced: true,
? state,
? getters,
? mutations,
? //actions,
}

其實這里還可以用 localStorage，但是它沒有期限；所以常用的還是sessionStorage，當瀏覽器關閉時會話結束。

第二種方法是 vuex-along

示例如下

（1）安裝 vuex-along

npm install vuex-along --save

（2）在store文件夾里的index.js中引入vuex-along并配置相關代碼

import Vue from 'vue'
import Vuex from 'vuex'
import indexOne from "./modules/indexOne"
import VueXAlong from 'vuex-along'
Vue.use(Vuex)
const store=new Vuex.Store({
? ? strict: false,
? ? modules:{
? ? ? ? indexOne
? ? },
plugins: [VueXAlong({
? ? ? ? name: 'along', ? ? //存放在localStroage或者sessionStroage 中的名字
? ? ? ? local: false, ? ? ?//是否存放在local中 ?false 不存放 如果存放按照下面session的配置配
? ? ? ? session: { list: [], isFilter: true } ??
? ? ? ? //如果值不為false 那么可以傳遞對象 其中 當isFilter設置為true時， list 數(shù)組中的值就會被過濾調,這些值不會存放在seesion或者local中
? ? ? })]
})
export default store;

第三種方法是 vuex-persistedstate

示例如下

（1）安裝 vuex-persistedstate

npm install --save vuex-persistedstate

（2）在store文件夾里的index.js中引入vuex-persistedstate并配置相關代碼

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
? modules: {
? ? user
? },
plugins: [createPersistedState({
? ? storage: window.sessionStorage,
? ? reducer(val) {
? ? ? return { // 只儲存state中的user?
? ? ? ? user: val.base
? ? ? }
? ? }
? })]
})
export default store;

第四種方法是 vuex-persist

示例如下

（1）安裝 vuex-persist

npm install --save vuex-persist
or
yarn add vuex-persist

（2）在store文件夾里的index.js中引入vuex-persist并配置相關代碼

import Vue from 'vue'
import Vuex from 'vuex'
import indexOne from "./modules/indexOne"
import VuexPersistence from 'vuex-persist'
Vue.use(Vuex)
const vuexLocal = new VuexPersistence({
? ? storage: window.localStorage
})
const store = new Vuex.Store({
? ? strict: false,
? ? modules:{
? ? ? ? indexOne,
? ? },
? ? plugins: [vuexLocal.plugin]
? })?
export default store;

注意：

其實解決此問題的方法有很多,基本上都是要借助于localStorage或者sessionStroage來存放。