vuex刷新頁(yè)面后如何解決丟失store的數(shù)據(jù)問(wèn)題

更新時(shí)間：2022年12月01日 14:17:12 作者：harold1024

這篇文章主要介紹了vuex刷新頁(yè)面后如何解決丟失store的數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vuex刷新頁(yè)面后丟失store的數(shù)據(jù)

提出問(wèn)題

最近遇到個(gè)問(wèn)題，vue中vuex中的store數(shù)據(jù)，會(huì)在頁(yè)面刷新后初始化，為了解決這一問(wèn)題決定將store里面數(shù)據(jù)在頁(yè)面刷新前保存到sessionStorage，至于為何用他，因?yàn)轫?yè)面關(guān)閉后他會(huì)被清空，localStorage則會(huì)一直存在，cookie又太小，因此sessionStorage最合適。

解決方案

在app.vue的created方法中讀取sessionstorage中的數(shù)據(jù)存儲(chǔ)在store中，此時(shí)用vuex.store的replaceState方法，替換store的根狀態(tài)

在beforeunload方法中將store.state存儲(chǔ)到sessionstorage中。

export default {
? name: 'app',
? created () {
? ? // 在頁(yè)面加載時(shí)讀取sessionStorage
? ? if (sessionStorage.getItem('store')) {
? ? ? this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
? ? }
? ? // 在頁(yè)面刷新時(shí)將store保存到sessionStorage里
? ? window.addEventListener('beforeunload', () => {
? ? ? sessionStorage.setItem('store', JSON.stringify(this.$store.state))
? ? })
? }
}

vuex刷新頁(yè)面數(shù)據(jù)丟失（數(shù)據(jù)持久化）

前提：

為什么要讓vuex數(shù)據(jù)持久化：

在使用vuex的時(shí)候，會(huì)發(fā)現(xiàn)刷新頁(yè)面之后state中存儲(chǔ)的數(shù)據(jù)會(huì)被重置，因?yàn)樗⑿聻g覽器的時(shí)候會(huì)導(dǎo)致整個(gè)頁(yè)面重新加載，vuex的state也會(huì)全部重新加載，所以為了防止這類(lèi)情況的發(fā)生，我們會(huì)將vuex中的數(shù)據(jù)進(jìn)行本地存儲(chǔ)，防止頁(yè)面刷新丟失vuex中的數(shù)據(jù)。

存儲(chǔ)到localStorage中

首先安裝vuex-persistedstate

npm install vuex-persistedstate -S

vuex-persistedstate默認(rèn)存儲(chǔ)到localStorage，使用如下：

在store文件夾下面的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
? ? plugins: [createPersistedState()],
})

存儲(chǔ)到sessionStorage中

使用vuex-persistedstate存儲(chǔ)到sessionStorage，如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
? ? plugins: [createPersistedState({
? ? ? ? storage: window.sessionStorage
? ? })],
})

指定數(shù)據(jù)持久化

使用vuex-persistedstate指定需要持久化的state數(shù)據(jù)，如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
? ? plugins: [createPersistedState({
? ? ? ? storage: window.sessionStorage,
? ? ? ? // 方法1：用reducer，這里的val是由store里面的所有state，不加reducer為儲(chǔ)存所有，reducer為指定存儲(chǔ)
? ? ? ? reducer(val) ?{
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 只儲(chǔ)存state中的name
? ? ? ? ? ? ? ? keyName: val.name
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 方法2：用paths,數(shù)組里面填模塊名，存儲(chǔ)指定模塊
? ? ? ? // paths: ['Home', 'Order']
? ? })]
})