本节主要围绕菜单收缩状态持久化 讲解vuex持久化

本节效果
收缩时 浏览器刷 新状态还在 会从sesstion storage里获取
image.png
展开时
image.png

2-1 菜单收缩状态进行vuex状态持久化

主要依赖vuex插件 vuex-persistedstate 可以选择storage或自定义 可以部分状态持久化

vuex-persistedstate文档使用说明

安装vuex-presistedstate

  1. npm install --save vuex-persistedstate

vuex-persistedstate 这个插件源码 大家可以看看没多少代码容易理解 以及 学习怎么写一个vuex插件 https://github.com/robinvdvleuten/vuex-persistedstate

修改store.ts

添加vuex插件

src/store/index.ts

  1. import { InjectionKey } from 'vue'
  2. import { createStore, Store, useStore as baseUseStore } from 'vuex'
  3. import createPersistedState from 'vuex-persistedstate'
  4. import app, { IAppState } from '@/store/modules/app'
  5. // import test, { ICountState } from './modules/test'
  6. import getters from './getters'
  8. // 模块声明在根状态下
  9. export interface IRootState {
  10.   app: IAppState;
  11.   // test: ICountState;
  12. }
  14. // 通过下面方式使用 TypeScript 定义 store 能正确地为 store 提供类型声明。
  15. // https://next.vuex.vuejs.org/guide/typescript-support.html#simplifying-usestore-usage
  16. // eslint-disable-next-line symbol-description
  17. export const key: InjectionKey<Store<IRootState>> = Symbol()
  19. // 对于getters在组件使用时没有类型提示
  20. // 有人提交了pr #1896 为getters创建泛型 pr通过了 还未发布
  21. // https://github.com/vuejs/vuex/pull/1896
  22. // 代码pr内容详情
  23. // https://github.com/vuejs/vuex/pull/1896/files#diff-093ad82a25aee498b11febf1cdcb6546e4d223ffcb49ed69cc275ac27ce0ccce
  25. // vuex store持久化 默认使用localstorage持久化
  26. const persisteAppState = createPersistedState({
  27.   storage: window.sessionStorage, // 指定storage 也可自定义
  28.   key: 'vuex_app', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  29.   // paths: ['app'] // 针对app这个模块持久化
  30.   // 只针对app模块下sidebar.opened状态持久化
  31.   paths: ['app.sidebar.opened'] // 通过点连接符指定state路径
  32. })
  34. // 针对test模块持久化
  35. // const persisteTestState = createPersistedState({
  36. //  storage: window.sessionStorage,
  37. //  key: 'vuex_test',
  38. //  paths: ['test'] // 针对test这个模块持久化
  39. // })
  40. export default createStore<IRootState>({
  41.   plugins: [
  42.     persisteAppState
  43.     // persisteTestState // 只是测试多模块持久化
  44.   ],
  45.   getters,
  46.   modules: {
  47.     app
  48.     // test // 只是测试多模块持久化
  49.   }
  50. })
  52. // 定义自己的 `useStore` 组合式函数
  53. // https://next.vuex.vuejs.org/zh/guide/typescript-support.html#%E7%AE%80%E5%8C%96-usestore-%E7%94%A8%E6%B3%95
  54. // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  55. export function useStore () {
  56.   return baseUseStore(key)
  57. }
  59. // vuex持久化 vuex-persistedstate文档说明
  60. // https://www.npmjs.com/package/vuex-persistedstate

本节参考源码

https://gitee.com/brolly/vue3-element-admin/commit/8d5fda408ef852951349963cd7296d3ce0ea3a3c