Vuex持久化存儲之vuex-persist問題

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

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

Vuex持久化存儲之vuex-persist

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

也就是說當你存儲在 Vuex 中的 store 里的數(shù)據(jù)，只要一刷新頁面，數(shù)據(jù)就丟失了。

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

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

具體用法

如下：

安裝：

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

引入：

import VuexPersistence from 'vuex-persist'

先創(chuàng)建一個對象并進行配置：

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

引入進vuex插件：

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

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

vuex-persist 的詳細屬性

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

Vuex持久化插件 Vuex-persist~~簡單粗暴

我們知道vuex也有?些弊端,?如瀏覽器刷新的時候,vuex的數(shù)據(jù)會丟失,我們一般結合本地存儲來解決，這個時候就可以使用 vuex-persist 持久化插件，不需要手動存取 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  //這里可以改變存儲方式，默認是localStorage
})
export default new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
})

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