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

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

存在問題：

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

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

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

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

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

但是這樣就會導(dǎo)致一個問題：下一次再重新登陸的時候，vuex數(shù)據(jù)刷新，但是不會再請求后臺數(shù)據(jù)了，因此得不到后臺的數(shù)據(jù)。

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

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

實現(xiàn)方式：

1.利用瀏覽器的本地存儲localStorage和sessionStorage

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

2.利用vue-presistedstate插件

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

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

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

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

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

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

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

但是在使用 vuex 的時候也遇到很多問題，比如，“一刷新就沒啦”：

vuex 的數(shù)據(jù)是存儲在瀏覽器維護的內(nèi)存中，頁面刷新會重新初始化，簡單的說，就是沒了。

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

所以“一刷新就沒啦”是很正常的。

下面就是解決的方案

首先第一種

使用localStorage 來進行存儲，但是這樣有一個問題

我們的數(shù)據(jù)是會更新的，但是我們?nèi)绻孢MlocalStorage里，就無法實時更新我們的數(shù)據(jù)，

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

第二種 使用vuex的插件 來解決

使用vuex-persistedstate

首先我們先安裝這個插件

npm i -S vuex-persistedstate

配置使用

在vuex初始化的時候作為組件去引入

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

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

這時候就需要使用sessionStorage

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

還有一種就是使用cookie的時候

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)
? ? ? }
? ? })
? ]
})

最后我們在頁面里需要使用輔助函數(shù)以及dispatch來觸發(fā)就可以實現(xiàn)數(shù)據(jù)持久化

這樣我們就可以使用vuex來進行儲存數(shù)據(jù)了

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論