<p>我尝试的是在toast中使用自定义组件和一些Vuetify组件的vue-toastification。我使用<code>npm create vuetify@latest</code>创建了仓库，并安装了库<code>npm i vue-toastification@latest</code>。然后使用了插件：</p> <pre class="lang-js prettyprint-override"><code>// 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); </code></pre> <p>然后我尝试使用以下代码调用toast：</p> <pre class="lang-js prettyprint-override"><code>// 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); } }); </code></pre> <p>在我的组件中：</p> <pre class="lang-js prettyprint-override"><code>// 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> </code></pre> <p>我从App.vue文件中调用它：</p> <pre class="lang-js prettyprint-override"><code>// 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> </code></pre> <p>但是在运行时，当我点击按钮时，我得到以下错误：</p> <pre class="brush:php;toolbar:false;">[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: {…}, …}位置＝“底部中心” > [Vue warn]：执行调度程序刷新期间出现未处理的错误。这可能是 Vue 内部错误。请在 https://new-issue.vuejs.org/?repo=vuejs/core 提出问题 在处 at > 在 在 > 在 在 未捕获（承诺中）错误：[Vuetify] 找不到默认实例 在injectDefaults（defaults.ts：28：24） 设置时（defineComponent.tsx:118:24） 在 callWithErrorHandling (runtime-core.esm-bundler.js:158:18) 在 setupStatefulComponent (runtime-core.esm-bundler.js:7236:25) 在 setupComponent (runtime-core.esm-bundler.js:7197:36) 在 mountComponent (runtime-core.esm-bundler.js:5599:7) 在 processComponent (runtime-core.esm-bundler.js:5565:9) 在补丁处（runtime-core.esm-bundler.js:5040:11） 在 mountChildren (runtime-core.esm-bundler.js:5284:7) 在 mountElement (runtime-core.esm-bundler.js:5191:7) 处 <p>我丢失了什么？在运行时无法在动态组件中使用Vuetify吗？</p> <p>我在这里创建了一个示例仓库。</p>

import Toast from "vue-toastification";
import type { PluginOptions } from "vue-toastification";

const ToastOptions: PluginOptions = {
  shareAppContext: true,
  container: () => document.getElementById("app")!,
};

app.use(Toast, ToastOptions);