在vue項(xiàng)目的開發(fā)中經(jīng)常會用到vuex來進(jìn)行數(shù)據(jù)的存儲，然而在開發(fā)過程中會出現(xiàn)刷新后頁面的vuex的state數(shù)據(jù)初始化問題！下面是我用過的解決方法

1、利用storage緩存來實(shí)現(xiàn)vuex數(shù)據(jù)的刷新問題

我們可以在mutation等vuex的方法中對于數(shù)據(jù)進(jìn)行改變時，將數(shù)據(jù)同時存儲進(jìn)我們的本地瀏覽器緩存中；下面是我在mutation中寫的方法；

同步將數(shù)據(jù)的更改保存，也可以在頁面調(diào)用vuex的mutation方法時同步更改；但是這種方法只能針對少量的數(shù)據(jù)需要保持不刷新，在真正的卡發(fā)中并不適用

2、利用已有的插件來進(jìn)行保存新狀態(tài)

一致的插件中，我目前使用的是vuex-along插件，該插件使用非常方便簡潔。

通過 cnpm i vuex-along -D下載插件，在進(jìn)行引入，在store里面通過plugin來使用，這樣就能將所有的state的數(shù)據(jù)都進(jìn)行保存，不回應(yīng)為刷新而更改，當(dāng)然如果你想僅對某些數(shù)據(jù)進(jìn)行保存，也可以使用對應(yīng)的插件的api來實(shí)現(xiàn)，具體的api請看github；

上面的代碼僅為展示vuex-along插件的使用，項(xiàng)目的真實(shí)寫法并不規(guī)范，對于一般項(xiàng)目會將vuex的每個模塊獨(dú)立拆分出來，分別進(jìn)行管理

同時在項(xiàng)目中我們也都盡量使用輔助函數(shù)來實(shí)現(xiàn)vuex的管理，而不會應(yīng)用原生的寫法

對于state和getter的數(shù)據(jù)可以在計(jì)算屬性中來因夠用。而mutation和action則在methods方法應(yīng)用；如果你需要修改計(jì)算屬性，現(xiàn)在需要設(shè)置對應(yīng)的setter。

以上純屬自己的一點(diǎn)意見，如果需要請采納！

補(bǔ)充知識：vuex在刷新頁面時保持?jǐn)?shù)據(jù)不變（vuex狀態(tài)持久化）

問題：

在 vue 項(xiàng)目中使用 vuex 來進(jìn)行數(shù)據(jù)狀態(tài)的管理，當(dāng)刷新頁面時，vuex 中 state 的數(shù)據(jù)會出現(xiàn)初始化問題（數(shù)據(jù)丟失）

解決方法：

1.使用 webStorage 緩存

當(dāng)瀏覽器窗口關(guān)閉或者刷新時，會觸發(fā)beforeunload事件，此時，可以使用 webStorage 緩存來實(shí)現(xiàn) vuex 在刷新頁面時保持?jǐn)?shù)據(jù)不變

created(){
  //在頁面加載時讀取sessionStorage里的狀態(tài)信息
  this.$store.state.userInfo = window.sessionStorage.getItem("userInfo") 
  //在頁面刷新時將vuex里的信息保存到sessionStorage里
  window.addEventListener("beforeunload", () => {
    window.sessionStorage.setItem("userInfo", this.$store.state.userInfo)
  })
}

2.使用vuex狀態(tài)持久化插件vuex-persistedstate

vuex-persistedstate插件使用瀏覽器的本地存儲（ local storage ）對 vuex 的狀態(tài)（ state ）進(jìn)行持久化

安裝 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的狀態(tài)儲存到sessionStorage中（默認(rèn)儲存到localStorage中）
  { storage: window.sessionStorage }
 )]
})

以上這篇解決vuex數(shù)據(jù)頁面刷新后初始化操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論