vuex在页面刷新后数据的解决方法

原创于 2020-11-23 13:51:47 发布 · 361 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

自学前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍如何使用vuex-persistedstate插件解决Vuex在页面刷新后数据丢失的问题。通过将状态保存到sessionStorage或localStorage中，实现数据的持久化。

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

vuex在页面F5刷新后数据丢失，如果在页面刷新之前将数据存储在不会消失的地方，在页面重新加载再讲数值赋值回来就OK

这里用到一个插件 vuex-persistedstate

npm install --save vuex-persistedstate

在store 的 index.js 引入

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  plugins: [
    createPersistedState(),
    createPersistedState({
      storage: window.sessionStorage
    })
  ]
......
)}

我这里用的方法是存储在 sessionstorage 、localstorage里