naive-ui-admin/src/store/modules/projectSetting.ts

import { defineStore } from 'pinia'
import { store } from "@/store"
import projectSetting from '@/settings/projectSetting'

const {
  navMode,
  navTheme,
  headerSetting,
  showFooter,
  menuSetting,
  multiTabsSetting,
  crumbsSetting,
  permissionMode
} = projectSetting

interface ProjectSettingState {
  navMode: string,//导航模式
  navTheme: string,//导航风格
  headerSetting: object,//顶部设置
  showFooter: boolean, //页脚
  menuSetting: object, //多标签
  multiTabsSetting: object,//多标签
  crumbsSetting: object,//面包屑
  permissionMode: string//权限模式
}

export const useProjectSettingStore = defineStore({
  id: 'app-project-setting',
  state: (): ProjectSettingState => ({
    navMode: navMode,
    navTheme,
    headerSetting,
    showFooter,
    menuSetting,
    multiTabsSetting,
    crumbsSetting,
    permissionMode
  }),
  getters: {
    getNavMode(): string {
      return this.navMode;
    },
    getNavTheme(): string {
      return this.navTheme;
    },
    getHeaderSetting(): object {
      return this.headerSetting
    },
    getShowFooter(): boolean {
      return this.showFooter
    },
    getMenuSetting(): object {
      return this.menuSetting
    },
    getMultiTabsSetting(): object {
      return this.multiTabsSetting
    },
    getCrumbsSetting(): object {
      return this.multiTabsSetting
    },
    getPermissionMode(): string {
      return this.permissionMode
    }
  },
  actions: {
    setNavTheme(value: string): void {
      this.navTheme = value
    },
  }
})

// Need to be used outside the setup
export function useProjectSettingStoreWithOut() {
  return useProjectSettingStore(store);
}