前言
vue構建的單頁大型項目中，可能會用到Vuex 。Vuex 的狀態存儲是響應式的，當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
但是有一個問題就是：vuex的存儲的數據只是在頁面的中，相當于我們定義的全局變量，刷新之后，里邊的數據就會恢復到初始化狀態。但是這個情況有時候并不是我們所希望的。
比如，用戶已經登錄了，我把登錄狀態放到state中了，一刷新頁面，還要重新登錄？購物車里的添加的數據，一刷新要重新添加？
解決思路：
監聽頁面是否刷新，如果頁面刷新了，將state對象存入到sessionStorage/localStorage中。
頁面打開之后，判斷sessionStorage/localStorage中是否存在state對象，如果存在，則說明頁面是被刷新過的，將sessionStorage/localStorage中存的數據取出來給vuex中的state賦值。
如果不存在，說明是第一次打開，則取vuex中定義的state初始值。
sessionStorage和localStorage介紹
H5提供了我們常用的localStorage和sessionStorage。
兩者的區別：localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。
存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器后被清除。
存放數據大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信。
源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持。瀏覽器的支持除了IE７及以下不支持外，其他標準瀏覽器都完全支持(ie及FF需在web服務器里運行)
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem、removeItem、clear等。
代碼：
項目目錄結構：
在項目的入口頁面（App.vue）里添加監聽刷新事件：
name: 'App',
mounted () {
window.addEventListener('unload', this.saveState)
},
methods: {
saveState () {
sessionStorage.setItem('state', JSON.stringify(this.$store.state))
}
}
store里有可能存儲了一些涉密的信息，所以一直在 sessionStorage放著不是太好，頁面加載完成后，清空或者刪除指定的session。
window.addEventListener("load", () => {
sessionStorage.clear();
});
state.js:
var state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
count: 1,
obj: {},
arr: [1, 2, 3]
}
export default state
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './states'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
mutations.js:
import {
SOME_MUTATION
} from './mutation-types.js'
export default {
[SOME_MUTATION] (state) {
state.count++
}
}
mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
補充知識：vuex-along有效防止刷新頁面后vuex中的數據重置
1.vuex-along安裝
npm i vuex-along --save
2.在store目錄下的index.js文件中引入
2.1
import {createVuexAlong} from 'vuex-along'
2.2直接上圖
簡單說明其中的含義：
name：“”“”
//在這塊我存入的是localstorage，代表localstorage的鍵值
local：{list:["userInfo"],isFilter:true}
//list:要過濾的vuex中的數據，isFilter代表將userInfo濾過，其余存進localstorage
session：false
//對于sessionstorage不進行任何操作
更加詳細信息借助github進行了解：https://github.com/boenfu/vuex-along
3.以上這篇解決vuex刷新數據消失問題就是小編分享給大家的全部內容了，希望對各位將來的大佬有所幫助！也希望大家多多支持。
原文鏈接：https://blog.csdn.net/wang1006008051/article/details/82424335
