如何基于Vuexy模板创建全局Vuetify Snackbar？

结合你使用的Vuexy 9.0.1模板（Vue3+Vuetify+Pinia），最优方案是用Pinia管理状态+全局属性挂载，实现无需导入即可调用的全局Snackbar，步骤如下：

1. 创建Pinia Toast状态管理Store #

在@core/stores/目录下新建toast.ts，统一管理Snackbar的显示状态、文本、样式等：

import { defineStore } from 'pinia'

export const useToastStore = defineStore('toast', {
  state: () => ({
    show: false,
    text: '',
    color: 'info', // 可选值：success/warning/error/info等Vuetify内置颜色
    timeout: 3000, // 自动关闭时长（毫秒）
    position: 'bottom right' // Snackbar位置，支持Vuetify所有位置参数
  }),
  actions: {
    // 封装调用方法，简化组件内操作
    showToast(text: string, color = 'info', timeout = 3000) {
      this.text = text
      this.color = color
      this.timeout = timeout
      this.show = true
      // 自动关闭逻辑
      setTimeout(() => {
        this.show = false
      }, timeout)
    }
  }
})

2. 创建GlobalSnackbar组件 #

在@core/components/目录下新建GlobalSnackbar.vue，绑定Pinia状态渲染Vuetify的VSnackbar：

<script setup lang="ts">
import { useToastStore } from '@core/stores/toast'

const toastStore = useToastStore()
</script>

<template>
  <VSnackbar
    v-model="toastStore.show"
    :color="toastStore.color"
    :timeout="toastStore.timeout"
    :location="toastStore.position"
  >
    {{ toastStore.text }}
    <template v-slot:actions>
      <VBtn text @click="toastStore.show = false">
        关闭
      </VBtn>
    </template>
  </VSnackbar>
</template>

3. 挂载Toast Store到Vue全局属性 #

在main.ts中，将Toast Store挂载到全局属性，让所有组件无需导入即可调用：

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import { useToastStore } from '@core/stores/toast'

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)

// 挂载全局Toast实例
const toastStore = useToastStore()
app.config.globalProperties.$toast = toastStore

app.mount('#app')

为了TypeScript类型提示，在src/vite-env.d.ts中添加类型声明：

/// <reference types="vite/client" />

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $toast: ReturnType<typeof useToastStore>
  }
}

4. 在App.vue中引入GlobalSnackbar #

修改App.vue的script部分，导入GlobalSnackbar组件：

<script setup lang="ts">
import ScrollToTop from '@core/components/ScrollToTop.vue'
import GlobalSnackbar from '@core/components/GlobalSnackbar.vue' // 新增导入
import initCore from '@core/initCore'
import { initConfigStore, useConfigStore } from '@core/stores/config'
import { hexToRgb } from '@layouts/utils'
import { useTheme } from 'vuetify'

const { global } = useTheme()

initCore()
initConfigStore()

const configStore = useConfigStore()
</script>

<template>
  <VLocaleProvider :rtl="configStore.isAppRTL">
    <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
      <RouterView />
      <ScrollToTop />
      <GlobalSnackbar/> 
    </VApp>
  </VLocaleProvider>
</template>

5. 组件内调用示例 #

现在可以在任意组件中直接调用，无需导入：

<script setup lang="ts">
// 无需导入Toast相关内容
const refreshExample = () => {
  // 调用封装好的方法
  $toast.showToast('Example refreshing', 'info', 3000)
  
  // 也可以手动修改状态实现更灵活的控制
  // $toast.text = 'Example refreshing'
  // $toast.color = 'success'
  // $toast.show = true

  // 执行刷新逻辑...
}
</script>

<template>
  <Table />
  <RefreshBtn @click="refreshExample" />
</template>

额外优化说明 #

• 如果需要支持更多自定义配置（如显示图标、自定义按钮），可在Pinia的state中添加对应字段，在GlobalSnackbar组件中绑定即可。
• 若不需要自动关闭，可删除showToast方法中的定时器，手动通过$toast.show = false控制关闭。

内容的提问来源于stack exchange，提问作者user24489785