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

因子：

• Vuex優勢：相比sessionStorage，存儲數據更安全，sessionStorage可以在控制臺被看到。
• Vuex劣勢：在刷新頁面后，vuex會重新更新state，所以，存儲的數據會丟失。

言而總之：

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

解決思路：將state中的數據放在瀏覽器sessionStorage和localStorage

解決辦法：

存儲到localStorage

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

created(){//在頁面刷新時將vuex里的信息保存到localStorage里window.addEventListener("beforeunload",()=>{localStorage.setItem("messageStore",JSON.stringify(this.$store.state))})//在頁面加載時讀取localStorage里的狀態信息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，當然也可以指定需要持久化的state：

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

?

總結

以上是生活随笔為你收集整理的使用vue 刷新页面后state数据被清空的问题（刷新总是跳转到登陆页面）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。