關(guān)于vuex的數(shù)據(jù)持久化處理方式

更新時(shí)間：2023年10月07日 09:18:15 作者：安和橋北

這篇文章主要介紹了關(guān)于vuex的數(shù)據(jù)持久化處理方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vuex的數(shù)據(jù)持久化處理

基于vuex的數(shù)據(jù)持久化

存在問(wèn)題：

前端在使用vuex存儲(chǔ)數(shù)據(jù)的時(shí)候，一旦頁(yè)面刷新，所有之前存儲(chǔ)的數(shù)據(jù)就會(huì)丟失。

這是因?yàn)閖s代碼運(yùn)行在內(nèi)存中，代碼在運(yùn)行時(shí)，所有的變量和函數(shù)都是保存在內(nèi)存中的，因此在刷新時(shí)，之前申請(qǐng)的內(nèi)存會(huì)被釋放，js腳本會(huì)被重新加載，變量重新賦值。

此問(wèn)題映射在本項(xiàng)目上的體現(xiàn)：

為了更直觀方便的處理數(shù)據(jù)，一方面在數(shù)據(jù)庫(kù)中設(shè)置了服務(wù)類(lèi)型表，另一方面在前端視圖層處理時(shí)，將服務(wù)列表里的類(lèi)型數(shù)據(jù)都統(tǒng)計(jì)一遍，存放在vuex的state中。

為了提高本項(xiàng)目的執(zhí)行效率，我在vuex中設(shè)置了一個(gè)flag布爾變量，初值為true，保證只有在第一次掛載組件時(shí)才向后臺(tái)發(fā)出請(qǐng)求，獲取所有服務(wù)信息，并且修改flag值為false。

但是這樣就會(huì)導(dǎo)致一個(gè)問(wèn)題：下一次再重新登陸的時(shí)候，vuex數(shù)據(jù)刷新，但是不會(huì)再請(qǐng)求后臺(tái)數(shù)據(jù)了，因此得不到后臺(tái)的數(shù)據(jù)。

然后我又找了一個(gè)辦法，當(dāng)每次登陸的時(shí)候，把vuex中的flag值重新設(shè)置為true，這樣雖然解決了之前登陸之后沒(méi)有數(shù)據(jù)顯示的問(wèn)題，但是同時(shí)也造成了另一個(gè)問(wèn)題：數(shù)據(jù)累加，登陸一次所有之前的服務(wù)類(lèi)型數(shù)據(jù)就會(huì)累加一次

解決方法：使用vuex的數(shù)據(jù)持久化

實(shí)現(xiàn)方式：

1.利用瀏覽器的本地存儲(chǔ)localStorage和sessionStorage

vuex的state在localStorage或sessionStorage取值
在mutations里面，定義的方法對(duì)vuex的狀態(tài)操作的同時(shí)，對(duì)存儲(chǔ)也做對(duì)應(yīng)的操作

2.利用vue-presistedstate插件

原理和方法1一樣，也是結(jié)合了瀏覽器的本地存儲(chǔ)localStorage和sessionStorage，只不過(guò)是統(tǒng)一的配置，不需要每次都手寫(xiě)存儲(chǔ)方法。
安裝方式；npm install vuex-persistedstate --save
引入：在store下的index.js中引入，然后使用插件plugins

本項(xiàng)目為了高效方便，采用了第二種下載插件的方式。

這樣就實(shí)現(xiàn)了vuex中數(shù)據(jù)持久化的效果，之前存儲(chǔ)的數(shù)據(jù)再刷新和退出之后就不會(huì)丟失了。

vuex實(shí)現(xiàn)數(shù)據(jù)持久化，數(shù)據(jù)刷新消失解決

為什么會(huì)有vuex數(shù)據(jù)持久化這么一說(shuō)呢？

在開(kāi)發(fā)中，有一些全局?jǐn)?shù)據(jù)，比如用戶數(shù)據(jù)，系統(tǒng)數(shù)據(jù)等。這些數(shù)據(jù)很多組件中都會(huì)使用，我們當(dāng)然可以每次使用的時(shí)候都去請(qǐng)求，但是出于程序員的“潔癖”、“摳”等等優(yōu)點(diǎn)，還是希望一次請(qǐng)求，到處使用。

這時(shí)候很自然的想到存儲(chǔ)在 localStorage 中，但是有個(gè)問(wèn)題是，這些數(shù)據(jù)可能會(huì)變，如果沒(méi)能及時(shí)同步的話，就會(huì)用到不正確的數(shù)據(jù)，即使做了數(shù)據(jù)同步，但是 localStorage 中的數(shù)據(jù)不是響應(yīng)式的，不能自動(dòng)更新使用到這些數(shù)據(jù)的地方。這時(shí)候就想要開(kāi)始使用 vuex 了。

但是在使用 vuex 的時(shí)候也遇到很多問(wèn)題，比如，“一刷新就沒(méi)啦”：

vuex 的數(shù)據(jù)是存儲(chǔ)在瀏覽器維護(hù)的內(nèi)存中，頁(yè)面刷新會(huì)重新初始化，簡(jiǎn)單的說(shuō)，就是沒(méi)了。

localStorage 的數(shù)據(jù)是存儲(chǔ)在瀏覽器維護(hù)的一個(gè)簡(jiǎn)單數(shù)據(jù)庫(kù)里面，在本地文件中存儲(chǔ)，所以可以“持久化”存在。

所以“一刷新就沒(méi)啦”是很正常的。

下面就是解決的方案

首先第一種

使用localStorage 來(lái)進(jìn)行存儲(chǔ)，但是這樣有一個(gè)問(wèn)題

我們的數(shù)據(jù)是會(huì)更新的，但是我們?nèi)绻孢M(jìn)localStorage里，就無(wú)法實(shí)時(shí)更新我們的數(shù)據(jù)，

哪怕我們真的做了數(shù)據(jù)同步，他的數(shù)據(jù)也不是響應(yīng)式的，所以這個(gè)方法不建議使用！

第二種使用vuex的插件來(lái)解決

使用vuex-persistedstate

首先我們先安裝這個(gè)插件

npm i -S vuex-persistedstate

配置使用

在vuex初始化的時(shí)候作為組件去引入

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
? ? // ...
? ? plugins: [persistedState()]
})

vuex-persistedstate默認(rèn)使用localStorage來(lái)固化數(shù)據(jù)，一些特殊情況要如何應(yīng)對(duì)呢？（如：Mac中的safari的無(wú)痕瀏覽模式）

這時(shí)候就需要使用sessionStorage

plugins: [
? ? persistedState({ storage: window.sessionStorage })
]

還有一種就是使用cookie的時(shí)候

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
? // ...
? plugins: [
? ? persistedState({
? ? ? storage: {
? ? ? ? getItem: key => Cookies.get(key),
? ? ? ? setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
? ? ? ? removeItem: key => Cookies.remove(key)
? ? ? }
? ? })
? ]
})

最后我們?cè)陧?yè)面里需要使用輔助函數(shù)以及dispatch來(lái)觸發(fā)就可以實(shí)現(xiàn)數(shù)據(jù)持久化

這樣我們就可以使用vuex來(lái)進(jìn)行儲(chǔ)存數(shù)據(jù)了