Vuex数据状态持久化 _@jie_persistedstate使用方法-优快云博客

本文链接：https://blog.youkuaiyun.com/tattoo_jie/article/details/108717323

本文介绍如何使用HTML5本地存储和vuex-persistedstate插件实现Vuex状态的持久化，确保应用状态在页面刷新后依然保留。

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

vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，也可以通过插件vuex-persistedstate。

1.手动利用HTML5的本地存储

方法:

1、vuex的state在localStorage或sessionStorage中取值；

2、在mutations中,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。

这样state就会和存储一起存在并且与vuex同步

2.利用vuex-persistedstate插件

插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动每次都写存储方法。

使用方法:

安装:

npm install vuex-persistedstate --save

引入及配置：在store下的index.js中

import createPersistedState from "vuex-persistedstate"

conststore =newVuex.Store({
  // ...
  plugins: [createPersistedState()]
})

默认存储到localStorage

想要存储到sessionStorage，配置如下:

import createPersistedState from "vuex-persistedstate"

conststore = newVuex.Store({
    // ...
    plugins: [createPersistedState({
        storage:window.sessionStorage
    })]
})

默认持久化所有state

指定需要持久化的state,配置如下:

import createPersistedState from "vuex-persistedstate"

conststore = newVuex.Store({
  // ...
  plugins: [createPersistedState({
  storage:window.sessionStorage,
      reducer(val)  {
          return {
              // 只储存state中的assessmentData
              assessmentData: val.assessmentData
          }
      }
  })]
}）

vuex引用多个插件的写法:

譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'

// 判断环境 vuex提示生产环境中不使用
constdebug = process.env.NODE_ENV !== 'production'

constcreatePersisted = createPersistedState({
    storage:window.sessionStorage
})

exportdefaultnewVuex.Store({
  // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一个一维数组不然会解析错误