将导航抽屉状态管理迁移到Pinia存储

导航抽屉的打开/关闭状态之前是在组件中通过一个本地ref管理的。为了提高状态管理的一致性和可维护性,此状态现被移至Pinia存储中进行集中管理。在AppBar.vue组件中,导航抽屉状态的引用和操作已被更新,以使用新的Pinia存储逻辑。此更改还将有助于在将来跨组件或页面共享导航抽屉状态时提供更便捷的访问。
```
This commit is contained in:
ivamp 2024-08-03 16:13:48 +08:00
parent e67d1dbb6b
commit 1a70561f7c
2 changed files with 13 additions and 6 deletions

View File

@ -1,9 +1,13 @@
<template>
<!-- <v-app id="nav"> -->
<v-navigation-drawer v-model="drawer">
<v-navigation-drawer v-model="appStore.navigation_drawer">
<div class="pa-2">
<v-btn-group rounded="lg">
<v-btn density="default" icon="mdi-close" @click="drawer = !drawer" />
<v-btn
density="default"
icon="mdi-close"
@click="appStore.navigation_drawer = !appStore.navigation_drawer"
/>
<v-btn density="default" icon="mdi-plus" title="创建助理" />
</v-btn-group>
@ -39,19 +43,21 @@
</v-navigation-drawer>
<v-app-bar>
<v-app-bar-nav-icon @click="drawer = !drawer" />
<v-app-bar-nav-icon
@click="appStore.navigation_drawer = !appStore.navigation_drawer"
/>
<v-app-bar-title>{{ configStore.app_name }}</v-app-bar-title>
</v-app-bar>
<!-- </v-app> -->
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useConfigStore } from "@/stores/config";
import { useUserStore } from "@/stores/user";
import { useAppStore } from "@/stores/app";
const configStore = useConfigStore();
const userStore = useUserStore();
const drawer = ref(false);
const appStore = useAppStore();
</script>

View File

@ -2,7 +2,8 @@
import { defineStore } from "pinia";
export const useAppStore = defineStore("app", {
persist: true,
state: () => ({
//
navigation_drawer: false,
}),
});