前言

vue構(gòu)建的單頁(yè)大型項(xiàng)目中，可能會(huì)用到Vuex 。Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的，當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

但是有一個(gè)問題就是：vuex的存儲(chǔ)的數(shù)據(jù)只是在頁(yè)面的中，相當(dāng)于我們定義的全局變量，刷新之后，里邊的數(shù)據(jù)就會(huì)恢復(fù)到初始化狀態(tài)。但是這個(gè)情況有時(shí)候并不是我們所希望的。

比如，用戶已經(jīng)登錄了，我把登錄狀態(tài)放到state中了，一刷新頁(yè)面，還要重新登錄？購(gòu)物車?yán)锏奶砑拥臄?shù)據(jù)，一刷新要重新添加？

解決思路：

監(jiān)聽頁(yè)面是否刷新，如果頁(yè)面刷新了，將state對(duì)象存入到sessionStorage/localStorage中。

頁(yè)面打開之后，判斷sessionStorage/localStorage中是否存在state對(duì)象，如果存在，則說明頁(yè)面是被刷新過的，將sessionStorage/localStorage中存的數(shù)據(jù)取出來給vuex中的state賦值。

如果不存在，說明是第一次打開，則取vuex中定義的state初始值。

sessionStorage和localStorage介紹

H5提供了我們常用的localStorage和sessionStorage。

兩者的區(qū)別：localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠(yuǎn)存在。

存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。sessionStorage僅在當(dāng)前會(huì)話下有效，關(guān)閉頁(yè)面或?yàn)g覽器后被清除。

存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存，不參與和服務(wù)器的通信。

源生接口可以接受，亦可再次封裝來對(duì)Object和Array有更好的支持。瀏覽器的支持除了IE７及以下不支持外，其他標(biāo)準(zhǔn)瀏覽器都完全支持(ie及FF需在web服務(wù)器里運(yùn)行)

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem、removeItem、clear等。

代碼：

項(xiàng)目目錄結(jié)構(gòu)：

在項(xiàng)目的入口頁(yè)面（App.vue）里添加監(jiān)聽刷新事件：

name: 'App',
 mounted () {
 window.addEventListener('unload', this.saveState)
 },
 methods: {
 saveState () {
  sessionStorage.setItem('state', JSON.stringify(this.$store.state))
 }
 }

store里有可能存儲(chǔ)了一些涉密的信息，所以一直在 sessionStorage放著不是太好，頁(yè)面加載完成后，清空或者刪除指定的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'

補(bǔ)充知識(shí)：vuex-along有效防止刷新頁(yè)面后vuex中的數(shù)據(jù)重置

1.vuex-along安裝

npm i vuex-along --save

2.在store目錄下的index.js文件中引入

2.1

import {createVuexAlong} from 'vuex-along'

2.2直接上圖

簡(jiǎn)單說明其中的含義：

name：“”“”

//在這塊我存入的是localstorage，代表localstorage的鍵值

local：{list:["userInfo"],isFilter:true}

//list:要過濾的vuex中的數(shù)據(jù)，isFilter代表將userInfo濾過，其余存進(jìn)localstorage

session：false

//對(duì)于sessionstorage不進(jìn)行任何操作

更加詳細(xì)信息借助github進(jìn)行了解：https://github.com/boenfu/vuex-along

3.以上這篇解決vuex刷新數(shù)據(jù)消失問題就是小編分享給大家的全部?jī)?nèi)容了，希望對(duì)各位將來的大佬有所幫助！也希望大家多多支持腳本之家。

最新評(píng)論