H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

【Vue】vuex中存储的数据在页面刷新之后都是失去,我想让vuex中的数据在刷新之后不会丢失怎么办。

1.vuex中存储的数据在刷新页面(F5)之后会丢失全部的数据
2.我想刷新页面之后不丢失。同时我还不想存储在window中的session和local中
各位大牛vuex中有没有相应的数据存储方法或者设置可以做到这样的效果

回答

你的这个业务场景跟vuex没有关系吧?

vuex就是一个“提升变量”的一个工具,它是将state当做全局变量存储。F5刷新页面之后自然随着页面的刷新重新初始化state。

目前想让浏览器记住数据,一般都会采用cookie或者localStorage等方法,如果有什么其它方法,欢迎分享。

window.localstorage
存起来就行

我是在router.js中对其进行监听,如果vuex中的值为空,则从sessionStorage中重新赋值

// 以token为例,页面刷新时,重新赋值
if (sessionStorage.getItem(“token”)) {
store.commit(“set_token”, sessionStorage.getItem(“token”));
}

如果用vuex,可以把全局的数据放在vuex里,或者将数据放在根组件app.vue中,子页面通过this.$root.data获取

自己写了个简单的小插件
一般使用足够
有兴趣可以看看

vuex-along

第2点不知道你说的是单指session和local还是指window的所有存储方式(cookie、websql),如果是前者你可以使用其他存储方式,如果是后者那么就无能为力。

也遇到相同的问题,设置了登陆后保存的一个状态,已经设好了,F5刷新页面,又是vuex定的初始值····理论上应该不这样呀。。。不然vuex都没有意义了

按你想要的,至少现在没办法的,即使vuex以后有这样的方法能支持,它也会是采用localStorage,sessionStorage这些东西来实现。

  1. 用本地存储
  2. 在页面加载时候可以写个 if 判断,看此 state 是否存在,若不存在则重新请求记录state,不好是用到此 state 的地方都要判断。

已经开始用这个插件了,非常好~~

vuex-persistedstate

vue-savedata

这个插件 配置简单一些-并且支持session和 localstoreage 同时存在

五种方法
强烈推荐 history.replaceState(null, null, ‘?type=save’)

  1. history.replaceState(null, null, ‘?type=save’) HTML5新增属性此方法会改变当前路由,但是不会刷新,浏览器的访问历史时也不会增加记录,唯一的缺点就是兼容性不好【强烈推荐】

该方法接受三个参数,依次为:

  • state:一个与添加的记录相关联的状态对象,主要用于popstate事件。该事件触发时,该对象会传入回调函数。也就是说,浏览器会将这个对象序列化以后保留在本地,重新载入这个页面的时候,可以拿到这个对象。如果不需要这个对象,此处可以填null
  • title:新页面的标题。但是,现在所有浏览器都忽视这个参数,所以这里可以填空字符串。
  • url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

2.创建一个标识 写入hash window.location.hash = ‘save’ 用户在刷新浏览器时判断hash是否去请求接口,但是hash改变会被记录到浏览器中,每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,会回到上一个位置,【所以此方法不推荐】

3.写入cookie 发送给服务端(数据量小的情况)

4.存储到localstorage(具有同源策略)

5.存储到sessionStorage(具有同源策略且标签之间不可共享数据)

这边有一个将vuex的state保存在localstorage中的库vuex-persistedstate,这样不需要直接操作localstorage,按vuex的方式来,根据个人喜好吧,用着还不错!默认会将所有的state保存在key为vuex的字符串中。

hi, 这里有封装好的 https://www.npmjs.com/package…

我也碰到这问题 一开始没碰到过着问题 老是出bug

本文地址:H5W3 » 【Vue】vuex中存储的数据在页面刷新之后都是失去,我想让vuex中的数据在刷新之后不会丢失怎么办。

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址