我尝试的是在toast中使用自定义组件和一些Vuetify组件的vue-toastification。我使用npm create vuetify@latest创建了仓库，并安装了库npm i vue-toastification@latest。然后使用了插件：

// main.ts

// Toastification
import Toast, { POSITION } from "vue-toastification";
import "vue-toastification/dist/index.css";

const app = createApp(App);

const options = {
  shareAppContext: true, // From https://github.com/Maronato/vue-toastification#access-global-components-and-plugins-inside-toasts
  position: POSITION.BOTTOM_CENTER,
};

registerPlugins(app);

app.use(Toast, options);

然后我尝试使用以下代码调用toast：

// store/error.ts

import { useToast } from "vue-toastification";
import MyComponent from "@/components/MyComponent.vue";

const toast = useToast();

export const useErrorStore = defineStore("error", () => {
  function locationError() {
    toast(MyComponent);
  }
});

在我的组件中：

// components/MyComponent.vue

<template>
  <div class="container">
    <v-container>
      <v-row>
        <v-col> Alert example </v-col>
        <v-col>
          <v-btn @click="reload">Reload</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script setup lang="ts">
function reload() {
  if (typeof window !== "undefined") {
    window.location.reload();
  }
}
</script>

我从App.vue文件中调用它：

// App.vue

<template>
  <v-app>
    <v-main>
      <v-btn @click="loc">Location Error</v-btn>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { useErrorStore } from "./store/error";

const errorStore = useErrorStore();

function loc() {
  errorStore.locationError();
}
</script>

但是在运行时，当我点击按钮时，我得到以下错误：

[Vue warn]: injection "Symbol(vuetify:defaults)" not found. 
  at <VContainer> 
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  at <VtToast key="_default00" position="bottom-center" draggable=true  ... > 
  at <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  at <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__container bottom-center" > 
  at <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position="bottom-center" >

[Vue warn]: Unhandled error during execution of setup function 
  at <VContainer> 
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  at <VtToast key="_default00" position="bottom-center" draggable=true  ... > 
  at <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  at <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__container bottom-center" > 
  at <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position="bottom-center" >

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <VContainer> 
  at <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > 
  at <VtToast key="_default00" position="bottom-center" draggable=true  ... > 
  at <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move"  ... > 
  at <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__container bottom-center" > 
  at <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position="bottom-center" >

Uncaught (in promise) Error: [Vuetify] Could not find defaults instance
    at injectDefaults (defaults.ts:28:24)
    at setup (defineComponent.tsx:118:24)
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7236:25)
    at setupComponent (runtime-core.esm-bundler.js:7197:36)
    at mountComponent (runtime-core.esm-bundler.js:5599:7)
    at processComponent (runtime-core.esm-bundler.js:5565:9)
    at patch (runtime-core.esm-bundler.js:5040:11)
    at mountChildren (runtime-core.esm-bundler.js:5284:7)
    at mountElement (runtime-core.esm-bundler.js:5191:7)

我错过了什么？在运行时无法在动态组件中使用Vuetify吗？

我在这里创建了一个示例仓库。