刷新后vuex数据会丢失的原因,vuex刷新数据丢失怎么处理
Vuex是大多数人在使用vue时会选择的，但是当页面刷新时，vuex的数据会丢失。以下文章主要介绍了vuex页面刷新数据丢失问题的四种解决方案，有需要的朋友可以参考一下。
目录
为什么说刷新页面会丢失vuex的数据？第一种方法是sessionStorage，第二种方法是vuex-along，第三种方法是vuex-persistedstate，第四种方法是Vuex-persistent，结论如下：
为什么说刷新页面vuex的数据会丢失
页面vuex的数据会丢失是正常现象，因为JS的数据是存储在浏览器的堆栈内存中的。浏览器页面刷新时，释放了之前堆栈应用的内存，这是浏览器的运行机制，所以堆栈中的数据自然被清空。
第一种方法用sessionStorage
将接口返回的数据保存在vuex的存储中，同时将这些信息保存在sessionStorage中。注意vuex中的变量是有响应的，而sessionStorage不是。当您在vuex中更改状态时，组件会检测到更改，但sessionStorage不会。必须刷新页面才能看到更改，因此应该从sessionStorage中获取vuex中的状态，以便组件可以响应更改。
存储文件夹中的js文件示例如下
常量状态={
authInfo:JSON . parse(session storage . getitem( COMPANY _ AUTH _ INFO ) { }
}
const getters={
authInfo: state=state.authInfo，
}
常量突变={
SET_COMPANY_AUTH_INFO(state，data) {
state.authInfo=data
session storage . setitem( COMPANY _ AUTH _ INFO ，JSON.stringify(data))
}
}
//不需要在//actions模块中使用sessionStorage。
导出默认值{
命名空间：对，
状态，
吸气剂，
突变，
//动作，
}
其实这里也可以使用localStorage，但是没有期限；因此，通常使用sessionStorage，当浏览器关闭时会话结束。
第二种方法是 vuex-along
示例如下
安装vuex-along
npm安装vuex并保存
(2)将vuex-along引入到store文件夹下的index.js中，并配置相关代码。
从“vue”导入Vue
从“vuex”导入Vuex
从导入indexOne。/模块/索引一
从“vuex-along”导入VueXAlong
Vue.use(Vuex)
const store=new Vuex。商店({
严格：假的，
模块：{
索引一
},
插件：[VueXAlong({
Name: along ，//存储在localStroage或sessionStroage中的名称
Local: false，//是否存储在本地？False，则不存储它。如果已存储，则根据以下进程进行配置。
会话：{列表：[]，isFilter: true }
//如果值不为false，则可以传递对象。当isFilter设置为true时，将过滤列表数组中的值，并且这些值不会存储在seesion或local中。
})]
})
导出默认存储；
第三种方法是 vuex-persistedstate
示例如下
(1)安装vuex-persistedstate。
npm安装-保存vuex-持久状态
(2)在store文件夹的index.js中引入vuex-persistedstate，并配置相关代码。
从“vue”导入Vue
从“vuex”导入Vuex
从导入用户。/模块/用户
从“vuex-persistedstate”导入createPersistedState
Vue.use(Vuex)
const store=new Vuex。商店({
模块：{
用户
},
插件：[createPersistedState({
存储：window.sessionStorage，
减速器(val) {
Return {//仅保存处于该状态的用户
用户：val.base
}
}
})]
})
导出默认存储；
第四种方法是 vuex-persist
示例如下
(1)安装vuex-persist。
npm安装-保存vuex-持久化
或者
纱线添加vuex-persist
(2)将vuex-persist引入到store文件夹下的index.js中，并配置相关代码。
从“vue”导入Vue
从“vuex”导入Vuex
从导入indexOne。/模块/索引一
从“vuex-persist”导入VuexPersistence
Vue.use(Vuex)
const vuex local=new VuexPersistence({
存储：window.localStorage
})
const store=new Vuex。商店({
严格：假的，
模块：{
indexOne，
},
插件：[vuexLocal.plugin]
})
导出默认存储；
结语：
其实解决这个问题的方法有很多，基本上都是通过localStorage或者sessionStroage的方式进行存储。
以上就是本文关于vuex页面刷新数据丢失问题的四种解决方案。更多关于vuex页面刷新的数据丢失问题，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。