Vuex 数据持久化（vuex-persistedstate）

最新推荐文章于 2024-08-04 14:17:55 发布

原创最新推荐文章于 2024-08-04 14:17:55 发布 · 294 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用vuex-persistedstate插件将Vuex的状态保存到localStorage或sessionStorage，以实现实例中的模块化状态持久化。适合开发者理解和配置状态持久化策略。

安装

yarn add vuex-persistedstate

导入

import createPersistedState from 'vuex-persistedstate'

vuex-persistedstate 持久化模式

默认：localStorage
可配置为 sessionStorage

plugins: [createPersistedState({ 
      storage:window.sessionStorage,  
    }
  )],

使用

const store = new Vuex.Store({
  modules: {
    user: {},
  },
  getters,
  actions, // 异步
  mutations, // 同步
  plugins: [createPersistedState({ 
      // storage:window.sessionStorage,  
    }
  )],

})

多 modules 版本

const store = new Vuex.Store({
  modules: {
    user: {},
    menu: [],
  },
  getters,
  actions, // 异步
  mutations, // 同步
  plugins: [createPersistedState({ })],

})