解決vuex資料頁面重新整理後初始化操作
在vue專案的開發中經常會用到vuex來進行資料的儲存,然而在開發過程中會出現重新整理後頁面的vuex的state資料初始化問題!下面是我用過的解決方法
1、利用storage快取來實現vuex資料的重新整理問題
我們可以在mutation等vuex的方法中對於資料進行改變時,將資料同時儲存進我們的本地瀏覽器快取中;下面是我在mutation中寫的方法;
同步將資料的更改儲存,也可以在頁面呼叫vuex的mutation方法時同步更改;但是這種方法只能針對少量的資料需要保持不重新整理,在真正的卡發中並不適用
2、利用已有的外掛來進行儲存新狀態
一致的外掛中,我目前使用的是vuex-along外掛,該外掛使用非常方便簡潔。
通過 cnpm i vuex-along -D下載外掛,在進行引入,在store裡面通過plugin來使用,這樣就能將所有的state的資料都進行儲存,不迴應為重新整理而更改,當然如果你想僅對某些資料進行儲存,也可以使用對應的外掛的api來實現,具體的api請看github;
上面的程式碼僅為展示vuex-along外掛的使用,專案的真實寫法並不規範,對於一般專案會將vuex的每個模組獨立拆分出來,分別進行管理
同時在專案中我們也都儘量使用輔助函式來實現vuex的管理,而不會應用原生的寫法
對於state和getter的資料可以在計算屬性中來因夠用。而mutation和action則在methods方法應用;如果你需要修改計算屬性,現在需要設定對應的setter。
以上純屬自己的一點意見,如果需要請採納!
補充知識:vuex在重新整理頁面時保持資料不變(vuex狀態持久化)
問題:
在 vue 專案中使用 vuex 來進行資料狀態的管理,當重新整理頁面時,vuex 中 state 的資料會出現初始化問題(資料丟失)
解決方法:
1.使用 webStorage 快取
當瀏覽器視窗關閉或者重新整理時,會觸發beforeunload事件,此時,可以使用 webStorage 快取來實現 vuex 在重新整理頁面時保持資料不變
created(){ //在頁面載入時讀取sessionStorage裡的狀態資訊 this.$store.state.userInfo = window.sessionStorage.getItem("userInfo") //在頁面重新整理時將vuex裡的資訊儲存到sessionStorage裡 window.addEventListener("beforeunload",() => { window.sessionStorage.setItem("userInfo",this.$store.state.userInfo) }) }
2.使用vuex狀態持久化外掛vuex-persistedstate
vuex-persistedstate外掛使用瀏覽器的本地儲存( local storage )對 vuex 的狀態( state )進行持久化
安裝 vuex-persistedstate:
npm install vuex-persistedstate --save-dev
在store資料夾的 index.js 中使用
//引入vuex-persistedstate import createPersistedState from 'vuex-persistedstate' ...... export default new Vuex.Store({ ...... //配置vuex-persistedstate plugins: [createPersistedState( //配置將vuex的狀態儲存到sessionStorage中(預設儲存到localStorage中) { storage: window.sessionStorage } )] })
以上這篇解決vuex資料頁面重新整理後初始化操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。