状态管理

ai-go-admin 的状态管理使用了 Pinia，这是 vue3 官方推荐的状态管理工具。

stores 目录

stores 意为前端状态商店，ai-go-admin 所有的状态和操作状态的方法，都放在了 \src\stores 目录下。

<template>
    <div>
        <!-- 使用来自状态商店的 adminInfo 的头像 -->
        <img :src="adminInfo.avatar" alt="" />

        <!-- 当前语言 -->
        <div>当前语言是：{{ config.lang.active }}</div>
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useAdminInfo } from '@/stores/adminInfo' // 管理员的状态数据
import { useConfig } from '@/stores/config' // 配置数据
import { useNavTab } from '@/stores/navTab' // 后台标签页数据

const adminInfo = useAdminInfo()
const config = useConfig()
const navTab = useNavTab()

console.log('管理员 ID 是:', adminInfo.id)
console.log('当前语言是:', config.lang.active)

navTab.setFullScreen(true) // 将当前标签页设置为全屏

const menuWidth = computed(() => config.getMenuWidth())
console.log('菜单宽度是:', menuWidth)
</script>

实现

在 /src/stores/index.ts 文件中，我们创建了 Pinia，并导入了 pinia-plugin-persistedstate 以实现状态更新后同步保存到浏览器 localStorage，随后我们在 main.ts 文件内，将创建好的 Pinia 安装到应用上。

定义商店

每个商店都应该是单独的文件，有两种语法可以定义商店。

语法一

import { defineStore } from 'pinia'
import { ADMIN_INFO } from '@/stores/constant/cacheKey'

export const useAdminInfo = defineStore('adminInfo', {
    state: (): AdminInfo => {
        return {
            id: 0,
            username: '',
        }
    },
    actions: {
        removeToken() {
            // ...
        },
    },
    persist: {
        // 指定将状态同步保存到 localStorage 时的 key
        key: ADMIN_INFO,
    },
})

语法二

import { reactive } from 'vue'
import { defineStore } from 'pinia'
import { ADMIN_INFO } from '@/stores/constant/cacheKey'

export const useAdminInfo = defineStore(
    'adminInfo',
    () => {
        const state = reactive({
            id: 0,
            username: '',
        })

        function removeToken() {
            // ...
        }

        return { state, removeToken }
    },
    {
        // 指定将状态同步保存到 localStorage 时的 key
        persist: {
            key: ADMIN_INFO,
        },
    }
)

使用商店

import { useAdminInfo } from '@/stores/adminInfo' // 管理员的状态数据
const adminInfo = useAdminInfo()

现有商店

文件路径	名称	备注
src/stores/adminInfo.ts	管理员信息	-
src/stores/config.ts	配置数据	含布局配置、多语言、站点配置
src/stores/menu.ts	后台菜单数据	-
src/stores/navTab.ts	后台导航栏数据	-
src/stores/ref.ts	一些全局引用句柄	-

其他目录

• \stores\constant 目录，我们在此目录下放置了一些全局通用的常量定义，设计上可供全项目使用而不只是状态商店。
• \stores\interface 目录，我们在此目录下定义了状态商店用到的所有类型 interface。