在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資料頁面重新整理後初始化操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。