Vuex持久化存儲(chǔ)之vuex-persist問(wèn)題

更新時(shí)間：2023年10月11日 16:15:45 作者：每逢佳節(jié)掉三根.

這篇文章主要介紹了Vuex持久化存儲(chǔ)之vuex-persist問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vuex持久化存儲(chǔ)之vuex-persist

Vuex 的狀態(tài)存儲(chǔ)并不能持久化。

也就是說(shuō)當(dāng)你存儲(chǔ)在 Vuex 中的 store 里的數(shù)據(jù)，只要一刷新頁(yè)面，數(shù)據(jù)就丟失了。

引入vuex-persist 插件，它就是為 Vuex 持久化存儲(chǔ)而生的一個(gè)插件。

不需要你手動(dòng)存取 storage ，而是直接將狀態(tài)保存至 cookie 或者 localStorage 中。

具體用法

如下：

安裝：

npm install --save vuex-persist
or
yarn add vuex-persist

引入：

import VuexPersistence from 'vuex-persist'

先創(chuàng)建一個(gè)對(duì)象并進(jìn)行配置：

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})

引入進(jìn)vuex插件：

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})

通過(guò)以上設(shè)置，在圖3中各個(gè)頁(yè)面之間跳轉(zhuǎn)，如果刷新某個(gè)視圖，數(shù)據(jù)并不會(huì)丟失，依然存在，并且不需要在每個(gè) mutations 中手動(dòng)存取 storage 。

vuex-persist 的詳細(xì)屬性

屬性	類型	描述
key	string	將狀態(tài)存儲(chǔ)在存儲(chǔ)中的鍵。默認(rèn): 'vuex'
storage	Storage (Web API)	可傳localStorage, sessionStorage, localforage 或者你自定義的存儲(chǔ)對(duì)象. 接口必須要有g(shù)et和set. 默認(rèn)是: window.localStorage
saveState	function (key, state[, storage])	如果不使用存儲(chǔ)，這個(gè)自定義函數(shù)將保存狀態(tài)保存為持久性。
restoreState	function (key[, storage]) => state	如果不使用存儲(chǔ)，這個(gè)自定義函數(shù)處理從存儲(chǔ)中檢索狀態(tài)
reducer	function (state) => object	將狀態(tài)減少到只需要保存的值。默認(rèn)情況下，保存整個(gè)狀態(tài)。
filter	function (mutation) => boolean	突變篩選。看mutation.type并返回true，只有那些你想堅(jiān)持寫(xiě)被觸發(fā)。所有突變的默認(rèn)返回值為true。
modules	string[]	要持久化的模塊列表。

Vuex持久化插件 Vuex-persist~~簡(jiǎn)單粗暴

我們知道vuex也有?些弊端,?如瀏覽器刷新的時(shí)候,vuex的數(shù)據(jù)會(huì)丟失,我們一般結(jié)合本地存儲(chǔ)來(lái)解決，這個(gè)時(shí)候就可以使用 vuex-persist 持久化插件，不需要手動(dòng)存取 storage ，而是直接將狀態(tài)保存至 cookie 或者 localStorage 中

第一步

使用命令行安裝一下命令

npm i vuex-persist -S

第二部

引入到vuex

store/index.js

import VuexPersistence from "vuex-persist"

第三步

在store/index.js使用plugins

const vuexLocal = new VuexPersistence({
  storage: window.localStorage  //這里可以改變存儲(chǔ)方式，默認(rèn)是localStorage
})
export default new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})

這個(gè)時(shí)候就能夠解決，刷因頁(yè)面數(shù)據(jù)丟失的問(wèn)題~~~~