vue页面刷新数据丢失问题-优快云博客

本文详细介绍了如何在Vue项目中使用Vuex进行状态管理，并结合SessionStorage实现数据持久化。具体展示了如何在main.js中定义Vuex store，设置state、getters、mutations和actions。同时，在App.vue中实现了页面加载时从SessionStorage读取状态信息，以及页面刷新前将Vuex状态保存至SessionStorage的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考： https://blog.youkuaiyun.com/aliven1/article/details/80743470
https://blog.youkuaiyun.com/liang377122210/article/details/78880438
https://blog.youkuaiyun.com/goodaxuan/article/details/82113123

main.js文件中：

var store = new Vuex.Store({

state: {

userMsg: ' ' //要保存的数据

},

getters: {

},

mutations: {

set_userMsg(state, data) {

state.userMsg = data

}

},

actions: {

},

modules: {}

})

var data = {id:1, name:'王五'};

this.$store.commit('set_userMsg', data); //修改保存数据

App.vue中：

created() {

//在页面加载时读取sessionStorage里的状态信息

if(sessionStorage.getItem("userMsg")) {

this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("userMsg"))))

}

//在页面刷新时将vuex里的信息保存到sessionStorage里

window.addEventListener("beforeunload", () => {

sessionStorage.setItem("userMsg", JSON.stringify(this.$store.state))

})

}

调用数据组件中：

data部分         userMsg = ' ';

method部分       let t = sessionStorage.getItem("userMsg");

                let obj = JSON.parse(t);

                this.userMsg = obj.userMsg;

                console.log('userMsg', this.userMsg);     => userMsg   {id:1, name:'王五'}

转载于:https://www.cnblogs.com/linjiangxian/p/11454724.html