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

因子：

言而總之：

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

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

解決辦法：

存儲到localStorage

通過監(jiān)聽頁面的刷新操作，即beforeunload前存入本地localStorage,頁面加載時再從本地localStorage讀取信息
在App.vue中加入下面代碼

created(){ //在頁面刷新時將vuex里的信息保存到localStorage里  window.addEventListener("beforeunload",()=>{   localStorage.setItem("messageStore",JSON.stringify(this.$store.state))  })   //在頁面加載時讀取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中，手動引入插件并配置

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

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

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯新站長站。