快捷導(dǎo)航

解決vuex數(shù)據(jù)頁面刷新后初始化操作

更新時(shí)間：2020年07月26日 10:43:21 作者：姚~xy

這篇文章主要介紹了解決vuex數(shù)據(jù)頁面刷新后初始化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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

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

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

同步將數(shù)據(jù)的更改保存，也可以在頁面調(diào)用vuex的mutation方法時(shí)同步更改；但是這種方法只能針對(duì)少量的數(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)然如果你想僅對(duì)某些數(shù)據(jù)進(jìn)行保存，也可以使用對(duì)應(yīng)的插件的api來實(shí)現(xiàn)，具體的api請(qǐng)看github；

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

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

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

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

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

問題：

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

解決方法：

1.使用 webStorage 緩存

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

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

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

vuex-persistedstate插件使用瀏覽器的本地存儲(chǔ)（ local storage ）對(duì) 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)儲(chǔ)存到sessionStorage中（默認(rèn)儲(chǔ)存到localStorage中）
  { storage: window.sessionStorage }
 )]
})

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

您可能感興趣的文章: