欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用vuex解決刷新頁(yè)面state數(shù)據(jù)消失的問(wèn)題記錄

 更新時(shí)間：2019年05月08日 14:30:03   作者：D阿偉  
這篇文章主要介紹了使用vuex解決刷新頁(yè)面state數(shù)據(jù)消失的問(wèn)題記錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

在實(shí)際的vue項(xiàng)目中，當(dāng)我們的應(yīng)用遇到多個(gè)組件之間的共享問(wèn)題時(shí)，通常會(huì)用到Vuex（一個(gè)狀態(tài)管理的插件，可以解決不同組件之間的數(shù)據(jù)共享和數(shù)據(jù)持久化），解決組件之間同一狀態(tài)的共享問(wèn)題。

因子：

  • Vuex優(yōu)勢(shì)：相比sessionStorage，存儲(chǔ)數(shù)據(jù)更安全，sessionStorage可以在控制臺(tái)被看到。
  • Vuex劣勢(shì)：在刷新頁(yè)面后，vuex會(huì)重新更新state，所以，存儲(chǔ)的數(shù)據(jù)會(huì)丟失。

言而總之：

實(shí)際問(wèn)題：在vue項(xiàng)目中，使用Vuex做狀態(tài)管理時(shí)，調(diào)試頁(yè)面時(shí)，刷新后state上的數(shù)據(jù)消失了，該如何解決？

解決思路：將state中的數(shù)據(jù)放在瀏覽器sessionStorage和localStorage

解決辦法：

存儲(chǔ)到localStorage

通過(guò)監(jiān)聽(tīng)頁(yè)面的刷新操作，即beforeunload前存入本地localStorage,頁(yè)面加載時(shí)再?gòu)谋镜豯ocalStorage讀取信息
在App.vue中加入下面代碼

created(){
 //在頁(yè)面刷新時(shí)將vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
   localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
  })
  
 //在頁(yè)面加載時(shí)讀取localStorage里的狀態(tài)信息
  localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
 }

使用vuex-persistedstate 插件

安裝插件：npm install vuex-persistedstate --save

配置：

在store的index.js中，手動(dòng)引入插件并配置

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState()]
})

該插件默認(rèn)持久化所有state，當(dāng)然也可以指定需要持久化的state：

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(data) {
   return {
   // 設(shè)置只儲(chǔ)存state中的myData
   myData: data.myData
  }
  }
 })]

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論