当前位置:首页 > vue.js > 正文内容

vuex刷新状态消失的解决办法

自由小鸟6年前 (2019-11-19)vue.js3192

vuex做数据管理非常好,但是唯一美中不足的地方,就是当页面刷新的时候状态保存不下来,但是工作业务中,常常会遇到,可能需要把状态保留下来的情况

那在这种情况下可以使用方案:

在 app.vue中的created函数中写如下代码:localstorage和sessionStorage都可以

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

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

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

}


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

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

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

})


版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=78

“vuex刷新状态消失的解决办法” 的相关文章

vue生命周期

生命周期钩子的一些使用方法:beforecreate : 可以在这加个loading事件,在加载实例时触发created : 初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用mounted : 挂载元素,获取到DOM节点updated : 如果对数据统一处理,在这里...

vue-router 路由的配置

vue-router 路由的配置

最好定义一个专门的路由配置文件来管理路由地址  接下来在点击的元素上开始设置路由path接收的 链接地址 例如以下...

十个常用的自定义过滤器

//去除空格  type 1-所有空格  2-前后空格  3-前空格 4-后空格 function trim(value, trim) {     ...

vue3

vue3

安装vite?-Vite是vue作者开发的一款意图取代webpack的工具,其实原理是利用ES6的import会发送请求加载文件的特性,拦截这些请求,做一些预编译,省去webapck沉长的打包时间安装:npm install -D create-vite-app利用vite创建 vue3项目cre...

vue3 新属性使用

vue3 新属性使用

setUp(){} //可以把所有数据和方法都放这里面一起导出,这个是在实现挂载之前就会执行的 ref基本的数据类型 reactive可以把数组,对象转成响应式 readonly处理之后的数据不能进行修改 toRefs可以把响应对象的某个解构出来的值变成响应式,如果原数据没有key,那就会...

vue updateModel

vue updateModel

v-model高级用法...