vuex的數據持久化處理

基于vuex的數據持久化

存在問題：

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

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

此問題映射在本項目上的體現：

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

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

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

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

解決方法：使用vuex的數據持久化

實現方式：

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

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

2.利用vue-presistedstate插件

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

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

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

vuex實現數據持久化，數據刷新消失解決

為什么會有vuex數據持久化這么一說呢？

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

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

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

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

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

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

下面就是解決的方案

首先第一種

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

我們的數據是會更新的，但是我們如果存進localStorage里，就無法實時更新我們的數據，

哪怕我們真的做了數據同步，他的數據也不是響應式的，所以這個方法不建議使用！

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

使用vuex-persistedstate

首先我們先安裝這個插件

npm i -S vuex-persistedstate

配置使用

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

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

vuex-persistedstate默認使用localStorage來固化數據，一些特殊情況要如何應對呢？（如：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)
? ? ? }
? ? })
? ]
})

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

這樣我們就可以使用vuex來進行儲存數據了

總結

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

最新評論