在實際的vue項目中,當我們的應用遇到多個組件之間的共享問題時,通常會用到Vuex(一個狀態管理的插件,可以解決不同組件之間的數據共享和數據持久化),解決組件之間同一狀態的共享問題。
因子:
言而總之:
實際問題:在vue項目中,使用Vuex做狀態管理時,調試頁面時,刷新后state上的數據消失了,該如何解決?
解決思路:將state中的數據放在瀏覽器sessionStorage和localStorage
解決辦法:
存儲到localStorage
通過監聽頁面的刷新操作,即beforeunload前存入本地localStorage,頁面加載時再從本地localStorage讀取信息
在App.vue中加入下面代碼
created(){ //在頁面刷新時將vuex里的信息保存到localStorage里 window.addEventListener("beforeunload",()=>{ localStorage.setItem("messageStore",JSON.stringify(this.$store.state)) }) //在頁面加載時讀取localStorage里的狀態信息 localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore")))); }
使用vuex-persistedstate 插件
安裝插件:npm install vuex-persistedstate --save
配置:
在store的index.js中,手動引入插件并配置
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState()] })
該插件默認持久化所有state,當然也可以指定需要持久化的state:
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage, reducer(data) { return { // 設置只儲存state中的myData myData: data.myData } } })]
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com