vue页面刷新数据丢失问题

参考： 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