前言

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

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

比如，用戶已經(jīng)登錄了，我把登錄狀態(tài)放到state中了，一刷新頁面，還要重新登錄？購物車里的添加的數(shù)據(jù)，一刷新要重新添加？

解決思路：

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

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

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

sessionStorage和localStorage介紹

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

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

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

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

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

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

代碼：

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

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

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中的數(shù)據(jù)重置

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中的數(shù)據(jù)，isFilter代表將userInfo濾過，其余存進localstorage

session：false

//對于sessionstorage不進行任何操作

更加詳細信息借助github進行了解：https://github.com/boenfu/vuex-along

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

最新評論