# 状态管理

BuildAdmin的状态管理使用了Pinia (opens new window),在使用前,请对其有基础了解,这是vue3官方推荐的状态管理工具。

# stores 目录

stores意为状态商店,BuildAdmin所有的状态和操作状态的方法,都放在了\src\stores目录下。

<template>
    <!-- 使用来自状态商店的 adminInfo 的头像 -->
    <img :src="adminInfo.avatar" alt="" />
    <div>当前语言是:{{ config.lang.defaultLang }}</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useAdminInfo } from "/@/stores/adminInfo" // 管理员的状态数据
import { useConfig } from '/@/stores/config' // WEB的全局布局配置数据
import { useNavTabs } from '/@/stores/navTabs' // 后台标签页数据
import { useTerminal } from "/@/stores/terminal" // 终端

const adminInfo = useAdminInfo()
const config = useConfig()
const navTabs = useNavTabs()
const terminal = useTerminal()

console.log("管理员ID是:", adminInfo.id)
console.log("当前语言是:", config.lang.defaultLang)
navTabs.setFullScreen(true) // 将当前标签页设置为全屏
terminal.addTask("version-view.npm") // 执行一个命令

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

# 其他目录

  • \stores\constant目录,我们在此目录下放置了所有的缓存变量名定义,以便我们可以随时修改缓存变量名,而无需改动具体存储缓存的代码。
  • \stores\interface目录,我们在此目录下定义了状态商店用到的所有类型interface

# 实现

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

# 定义商店

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

# 语法一

import { defineStore } from 'pinia'

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

# 语法二

import { defineStore } from 'pinia'
import { reactive } from 'vue'

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()