页面刷新vuex数据消失问题解决方案,页面刷新vuex数据消失
本文主要介绍了如何解决vuex刷新数据消失的问题，具有很好的参考价值。希望对你有帮助。来和边肖一起看看吧。
前言
Vuex可能用在e构建的大型单页项目中，Vue的状态存储是响应式的。当VUE组件从存储中读取状态时，如果存储中的状态发生变化，相应的组件将相应地有效更新。
但是有一个问题：vuex中存储的数据只在页面中，相当于我们定义的全局变量。刷新后，里面的数据会恢复到初始化状态。但有时候这种情况并不是我们想要的。
例如，用户已经登录，我将登录状态置于状态。页面刷新一次，我还要重新登录？购物车里添加的数据要一刷新就重新添加？
解决思路：
监视页面是否刷新，如果是，将状态对象存储在sessionStorage/localStorage中。
页面打开后，判断sessionStorage/localStorage中是否有状态对象。如果有，说明页面已经刷新。取出存储在sessionStorage/localStorage中的数据，并将其分配给vuex中的状态。
如果不存在，说明是第一次打开，取vuex中定义的state的初始值。
sessionStorage和localStorage介绍
H5提供了我们常用的本地存储和会话存储。
两者的区别：localStorage生命周期是永久的，这意味着除非用户清除浏览器提供的UI上的localStorage信息，否则该信息将永久存在。
存储数据大小一般为5MB，只存储在客户端(即浏览器)，不参与和服务器的通信。sessionStorage仅在当前会话中有效，关闭页面或浏览器后会被清除。
存储数据大小一般为5MB，只存储在客户端(即浏览器)，不参与和服务器的通信。
源接口可以被再次接受或封装，以更好地支持对象和数组。浏览器支持：除了ie7及以下，其他所有标准浏览器都完全支持(ie和FF需要运行在web服务器中)
localStorage和sessionStorage都有相同的操作方法，如setItem、getItem、removeItem、clear等。
代码：
项目目录结构：
在项目(App.vue)的入口页面添加显示器刷新事件：
名称：“应用程序”，
已安装(){
window . addevent listener( unload ，this.saveState)
},
方法：{
saveState () {
sessionStorage.setItem(state ，JSON.stringify(this。$store.state))
}
}
store中可能会存储一些机密信息，所以不要一直把它保存在sessionStorage中。加载页面后，清除或删除指定的会话。
window.addEventListener(load ，()={
session storage . clear()；
});
state.js:
var state=session storage . getitem( state )？JSON . parse(session storage . getitem( state ):{
计数：1，
obj: {}，
arr: [1，2，3]
}
导出默认状态
索引. js
从“vue”导入Vue
从“vuex”导入Vuex
从导入状态。/州
从导入突变。/突变
从导入getters。/getters
从导入操作。/操作
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态，
突变，
吸气剂，
行动
})
mutations.js:
导入{
一些突变
}来自。/mutation-types.js
导出默认值{
[某些_突变](状态){
状态.计数
}
}
突变类型. js
export const SOME _ MUTATION= SOME _ MUTATION
补充知识：vuex-along有效防止刷新页面后vuex中的数据重置
1.vuex-along安装
NPM I vuex-沿保存
2.在存储目录的index.js文件中介绍它
2.1
从“vuex-along”导入{createVuexAlong}
2.2正上方
简单说明其中的含义：
名称：“”
//在这个块中，我存放了localstorage，表示localstorage的键值。
local:{list:[userInfo]，isFilter:true}
//list:vuex中要过滤的数据，isFilter就是过滤userInfo，剩下的存放在localstorage。
会话：假
//对sessionstorage不做任何事情
通过github:https://github.com/boenfu/vuex-along了解更多信息
3.以上对vuex刷新数据消失问题的解决方案是边肖分享的全部内容。希望以后对你有帮助！也希望大家能支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。