解決vuex數(shù)據(jù)丟失問題

更新時間：2023年02月02日 08:38:18 作者：小渣亮

本文主要介紹了解決vuex?數(shù)據(jù)丟失問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

數(shù)據(jù)丟失的原因

vuex存儲的數(shù)據(jù)只是在頁面中，相當于全局變量，頁面刷新的時候vuex里的數(shù)據(jù)會重新初始化，導致數(shù)據(jù)丟失。

因為vuex里的數(shù)據(jù)是保存在運行內(nèi)存中的，當頁面刷新時，頁面會重新加載vue實例，vuex里面的數(shù)據(jù)就會被重新賦值。

方法1：使用第三方庫 vuex-persistedstate

npm install --save vuex-persistedstate

01 store / index.js 之 localStorage

- 注意點： vuex-persistedstate默認存儲在 localStorage之中，基本上不需要配置什么

import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
　　state: {
　　　　cartList: [],
　　},
　　mutations: {},
　　actions: {},
　　// 當state中的值發(fā)生改變，此時localStorage中的vuex的值會同步把state中的所有值存儲起來，當頁面刷
　　　新的時候，state的值會從localStorage自動獲取vuex的value值，賦值到state中
　　plugins: [createPersistedState()] 
})

02 store / index.js 之 sessionStorage

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
   plugins: [createPersistedState({
       storage:window.sessionStorage  // 同localStorage相同，只是將vuex的所有值存儲到sessionStorage中
   })]
})

03 store / index.js 之使用vuex-persistedstate指定需要持久化的state

import createPersistedState from "vuex-persistedstate"

const store = newVuex.Store({
?state: {
　　count: 0
},
?mutations: {},
?actions: {},
?plugins: [createPersistedState({
?　　storage:window.sessionStorage,
?　　reducer(val) ?{
? ? ? ? ?// 此時，當count發(fā)生改變的時候，就會調(diào)用此函數(shù)，并且val的值為當前state對象，return的值為當前本地存儲的value值（本地存儲的key值為vuex）
? ? ? ? ?return {
? ? ? ? ? ? ?count: val.count,
　　　　? 　　?changeCount: 'aaa'
? ? ? ? ?}
? ? ?}
?})]
}）

方法2 把state的數(shù)據(jù)先緩存到localStorage之中，頁面刷新的時候，拿到數(shù)據(jù)寫入vuex

store / index.js

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store（{
    state: {
       orderList: [],
       menuList: []
   },
    mutations: {
        orderList(s, d) {
          s.orderList= d;
          window.localStorage.setItem("list",jsON.stringify(s.orderList))
        },  
        menuList(s, d) {
          s.menuList = d;
          window.localStorage.setItem("list",jsON.stringify(s.menuList))
       },
   }
}）

頁面刷新的時候

通過監(jiān)聽beforeunload事件來進行數(shù)據(jù)的localStorage存儲，beforeunload事件在頁面刷新時進行觸發(fā)，具體做法是在App.vue的created()周期函數(shù)中下如下代碼

if (window.localStorage.getItem("list") ) {
    this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
} 
 
window.addEventListener("beforeunload",()=>{
    window.localStorage.setItem("list",JSON.stringify(this.$store.state))
})

到此這篇關于解決vuex數(shù)據(jù)丟失問題的文章就介紹到這了,更多相關vuex 數(shù)據(jù)丟失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: