快捷導(dǎo)航

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

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

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

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

提出問題

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

解決方案

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

在beforeunload方法中將store.state存儲到sessionstorage中。

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

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

前提：

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

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

存儲到localStorage中

首先安裝vuex-persistedstate

npm install vuex-persistedstate -S

vuex-persistedstate默認存儲到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()],
})

存儲到sessionStorage中

使用vuex-persistedstate存儲到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為儲存所有，reducer為指定存儲
? ? ? ? reducer(val) ?{
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 只儲存state中的name
? ? ? ? ? ? ? ? keyName: val.name
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 方法2：用paths,數(shù)組里面填模塊名，存儲指定模塊
? ? ? ? // paths: ['Home', 'Order']
? ? })]
})