Vue 3 用 Pinia 持久化存储（persist）之后，存储的组件无法渲染。

interface MenuItem {
  id: string;
  icon: string;
  title: string;
  active: boolean;
  component?: any; // 不持久化
}
Copy

{
  id: 'files',
  icon: 'mdi:folder',
  title: '文件',
  active: false
}
Copy

import { defineStore } from 'pinia';
import { markRaw, ref } from 'vue';

import LocalFolder from '@/components/LocalFolder.vue';
import Connections from '@/components/terminal/Connections.vue';
import ScriptList from '@/components/scripts/ScriptList.vue';

const componentMap = {
  terminal: markRaw(Connections),
  files: markRaw(LocalFolder),
  scripts: markRaw(ScriptList)
};

export const useLeftMenuStore = defineStore(
  'leftMenu',
  () => {
    const menus = ref([
      { id: 'terminal', icon: 'mdi:console', title: '终端', active: true },
      { id: 'files', icon: 'mdi:folder', title: '文件', active: false },
      { id: 'scripts', icon: 'mdi:script-text', title: '脚本', active: false }
    ]);

    const activeMenu = ref(menus.value[0]);

    // 在应用启动时，给每个菜单动态加上 component
    menus.value.forEach(menu => {
      (menu as any).component = componentMap[menu.id];
    });

    const setActiveComponent = (item) => {
      if (!item.active) {
        menus.value.forEach((menu) => {
          menu.active = menu.id === item.id;
        });
        activeMenu.value = item;
      }
    };

    return {
      menus,
      activeMenu,
      setActiveComponent
    };
  },
  { persist: true }
);
Copy