使用pinia-plugin-persistedstate对Settings Store进行持久化出现异常

[izanhzh]

fantastic-admin版本：基础版 v4.2.0
pinia-plugin-persistedstate版本：3.2.1

我想要利用 pinia-plugin-persistedstate 对settings进行持久化处理，以便能够记住我的Settings设置，切换明亮或暗黑主题后能永久生效。

我先是按照 pinia-plugin-persistedstate 的文档修改了 store/moudules/settings.ts，但是发现不生效，在local storage看不到持久化效果，但是我对其他的几个store文件同样方式修改又是可以的（例如： store/moudules/user.ts）

后来经过我一番折腾，目前勉强可以实现效果了:

1. 我放弃了对 store/moudules/settings.ts的修改，而是增加了一个新的文件 store/moudules/__persisted__settings.ts

import useSettingsStore from './settings'

const usePersistedSettingsStore = defineStore('__persisted__settings', {
  state: () => {
    const settingsStore = useSettingsStore()
    const settings = settingsStore.settings
    const os = settingsStore.os
    const title = settingsStore.title
    const setTitle = settingsStore.setTitle
    const mode = settingsStore.mode
    const setMode = settingsStore.setMode
    const subMenuCollapseLastStatus = settingsStore.subMenuCollapseLastStatus
    const toggleSidebarCollapse = settingsStore.toggleSidebarCollapse
    const setColorScheme = settingsStore.setColorScheme
    const updateSettings = settingsStore.updateSettings

    return {
      settings,
      os,
      title,
      setTitle,
      mode,
      setMode,
      subMenuCollapseLastStatus,
      toggleSidebarCollapse,
      setColorScheme,
      updateSettings,
    }
  },
  persist: true,
})

export default usePersistedSettingsStore

2. 修改 store/moudules/menu.ts、store/moudules/route.ts、store/moudules/user.ts 这三个Store文件，将 Simport useSettingsStore from './settings' 改为 import useSettingsStore from './__persisted__settings'

3. 特别重要的一点就是，其他 import useSettingsStore 的地方，不是store模块的，不能引入 __persisted__settings，否则又不生效了

由于我对vue、pinia都不太熟悉，不太清楚具体的问题出在哪里，能否增加实现settings记忆功能呢？或者至少对主题切换进行记忆。

[hooray]

你好，settings 由于其本身的特殊性，他包含了一些开发时的配置项，并不适合使用 pinia-plugin-persistedstate 这类通用的持久化插件处理，如果你希望只对明暗主题记忆，可以使用 localStorage 在明暗主题变化时记录当前 colorScheme 的值，并在 settings store 初始化的时候对 colorScheme 赋值。

以下是部分代码片段可作为参考：

import { defaultsDeep } from 'lodash-es'
import type { RouteMeta } from 'vue-router'
import type { Settings } from '#/global'
import settingsDefault from '@/settings'

const useSettingsStore = defineStore(
  // 唯一ID
  'settings',
  () => {
    const settings = ref(settingsDefault)
    if (localStorage.getItem('colorScheme')) {
      settings.value.app.colorScheme = localStorage.getItem('colorScheme') as Required<Settings.app>['colorScheme']
    }

    // 设置主题颜色模式
    function setColorScheme(color: Required<Settings.app>['colorScheme']) {
      settings.value.app.colorScheme = color
      localStorage.setItem('colorScheme', color)
    }

    return {
      settings,
      os,
      title,
      setTitle,
      mode,
      setMode,
      subMenuCollapseLastStatus,
      toggleSidebarCollapse,
      setColorScheme,
      updateSettings,
    }
  },
)

export default useSettingsStore