vuex页面数据丢失_Vuex刷新页面数据丢失

Vuex刷新页面数据丢失

解决办法：

组件二这个页面是读取state中的数据，所有必须先将数据保存在state中，组件一是点击后传参给state，然后跳转到组件二页面

使用sessionStorage

//main.js中的代码

const store = new Vuex.Store({

state: {

blogDetail: {},

},

mutations: {

//给state中的参数赋值

setBlog(state, blog) {

state.blogDetail = blog;

}

},

getters: {

//组件二中取值使用此方法

getBlogDetail: (state) => {

return state.blogDetail;

}

}

})

//组件一

//使用commit传参，将参数保存在state中

this.$store.commit('setBlog',blog);

//组件二

//在需要的参数的页面使用created函数，当sessionStorage存在值的时候通过commit给state重新赋值

created() {

if (sessionStorage.getItem("store")!=null) {

this.blogDetail=JSON.parse(sessionStorage.getItem("store"));

this.$store.commit("setBlog",this.blogDetail);

}

},

//App.vue页面

//开始想在这里给state中的参数重新赋值，结果不行，所有这里监听页面刷新事件，页面刷新时将sessionStorage保存

created() {

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

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

})

}

另外，sessionStorage会自动覆盖的，所有这里没有用其他的方法，直接setItem.

使用localStorage

参考sessionStorage

安装插件vuex-persistedstate

npm install vuex-persistedstate --save

main.js中导入, import xxx from 'vuex-persistedstate'

const store = new Vuex.Store({

plugins:["xxx"]

state: {

blogDetail: {},

},

mutations: {

setBlog(state, blog) {

state.blogDetail = blog;

}

},

getters: {

getBlogDetail: (state) => {

return state.blogDetail;

}

}

})

使用这个插件可以自动保存到Storage，具体是session还是local需要自己配置，原理也是上面那些，具体配置可以去看看文档