刷新网页后vuex的state数据丢失的解决方案

最新推荐文章于 2023-12-26 16:08:08 发布

摆烂的胡萝卜

最新推荐文章于 2023-12-26 16:08:08 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/hudabao888666/article/details/129401785

文章讨论了在Vue项目中使用Vuex进行全局状态管理时，数据在页面刷新后丢失的原因，即JavaScript数据存储于堆栈内存，刷新导致内存释放。提出了两种解决方案：一是手动将state数据保存在localstorage或sessionstorage中，二是使用vuex-persistedstate插件自动持久化状态。这两种方法都能在页面刷新后恢复Vuex的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在vue的项目中用vuex来做全局的状态管理，发现当网页刷新后，保存在vuex实例store里的数据会丢失，页面的展示也受到影响。

原因：

刷新页面vuex的数据会丢失属于正常现象，(vuex的数据并不是弄丢了，而是初始化了，回到初始值，回到原点了).因为JS的数据都是保存在浏览器的堆栈内存里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，那么堆栈里的数据自然就清空了。

解决办法:

方法一

将state的数据保存在localstorage,sessionstorage或cookie中。

// 在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态
// 在beforeunload方法中将store.state存储到sessionstorage中。

export default {
  name: 'app',
  created () {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

方法二

使用vuex-persistedstate,可以自动存储。

下载:

npm install --save vuex-persistedstate

使用:

在store.js中引入
import createPersistedState from'vuex-persistedstate'exportdefaultnewVuex.Store({

  //配置plugins: [createPersistedState()]
})

默认的是存储到localStorage里的，我们也可以存到sessionStorage中，如：

import createPersistedState from'vuex-persistedstate'exportdefaultnewVuex.Store({

  //配置plugins: [createPersistedState({
   storage: window.sessionStorage
  })]
})