刷新浏览器后,Vuex的数据是否存在?如何解决?

答案:vuex的数据在刷新浏览器后不会保存,这是因为vuex实例store里的数据保存在运行内存中,页面刷新会重载vue实例,导致store里的数据丢失。

解决方法1:使用vuex-along

先用npm安装vuex-along,然后在store/index.js的最后添加如下代码:

import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({
    //modules: {
        //controler  //模块化vuex
    //},
    plugins: [VueXAlong({
        name: 'store',     //存放在localStroage或者sessionStroage 中的名字
        local: false,      //是否存放在local中  false 不存放 如果存放按照下面session的配置
        session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
    })]
});

还有类似的库比如vuex-persist、vuex-persistedstate,使用方法都是类似的。 

解决方法2:localStorage 或者 sessionStroage

created() {
    //在页面加载时读取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));
    });
},

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决 Vuex 数据刷新消失的问题可以采取以下方法: 1. 将 Vuex数据持久化存储到浏览器的本地存储中,以便在页面刷新后可以重新加载数据。可以使用 `localStorage` 或 `sessionStorage` 来实现。在 Vuex 的 `store` 实例中添加一个 `beforeunload` 事件监听器,在页面即将刷新或关闭前将数据存储到本地存储中,在页面加载时从本地存储中读取数据并初始化 Vuex 的状态。 2. 将 Vuex数据通过后端接口保存到数据库中,在页面刷新后从数据库中获取数据来初始化 Vuex 的状态。在页面加载时,可以在 `created` 生命周期钩子中发送一个请求到后端接口,获取最新的数据,并通过 Vuex 的 `commit` 方法将数据保存到状态中。 3. 使用插件库如 `vuex-persistedstate` 来简化数据持久化存储的过程。这个库可以帮助我们将 Vuex 的状态存储到浏览器的本地存储中,在页面刷新后自动从本地存储中读取数据来初始化状态。只需要将这个插件作为 Vuex 的一个插件来使用即可。 4. 对于某些需要用户登录的应用,可以将用户的登录信息存储到浏览器的 `cookie` 中,在页面刷新后读取 `cookie` 中的用户信息来初始化 Vuex 的状态。可以使用 `js-cookie` 这样的库来简化处理 `cookie` 的过程。 以上是几种常见的解决 Vuex 数据刷新消失的问题的方法,可以根据具体情况选择适合的方式来实现数据的持久化存储和恢复。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值