<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 &quot;vue-toastification&quot;; import &quot;vue-toastification/dist/index.css&quot;; 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 &quot;vue-toastification&quot;; import MyComponent from &quot;@/components/MyComponent.vue&quot;; const toast = useToast(); export const useErrorStore = defineStore(&quot;error&quot;, () =&gt; { function locationError() { toast(MyComponent); } }); </code></pre> <p>在我的组件中：</p> <pre class="lang-js prettyprint-override"><code>// components/MyComponent.vue &lt;template&gt; &lt;div class=&quot;container&quot;&gt; &lt;v-container&gt; &lt;v-row&gt; &lt;v-col&gt; Alert example &lt;/v-col&gt; &lt;v-col&gt; &lt;v-btn @click=&quot;reload&quot;&gt;Reload&lt;/v-btn&gt; &lt;/v-col&gt; &lt;/v-row&gt; &lt;/v-container&gt; &lt;/div&gt; &lt;/template&gt; &lt;script setup lang=&quot;ts&quot;&gt; function reload() { if (typeof window !== &quot;undefined&quot;) { window.location.reload(); } } &lt;/script&gt; </code></pre> <p>我从App.vue文件中调用它：</p> <pre class="lang-js prettyprint-override"><code>// App.vue &lt;template&gt; &lt;v-app&gt; &lt;v-main&gt; &lt;v-btn @click=&quot;loc&quot;&gt;Location Error&lt;/v-btn&gt; &lt;/v-main&gt; &lt;/v-app&gt; &lt;/template&gt; &lt;script setup lang=&quot;ts&quot;&gt; import { useErrorStore } from &quot;./store/error&quot;; const errorStore = useErrorStore(); function loc() { errorStore.locationError(); } &lt;/script&gt; </code></pre> <p>但是在运行时，当我点击按钮时，我得到以下错误：</p> <pre class="brush:php;toolbar:false;">[Vue warn]: injection &quot;Symbol(vuetify:defaults)&quot; not found. at &lt;VContainer&gt; at &lt;MyComponent key=1 toast-id=0 onCloseToast=fn&lt;bound closeToast&gt; &gt; at &lt;VtToast key=&quot;_default00&quot; position=&quot;bottom-center&quot; draggable=true ... &gt; at &lt;TransitionGroup tag=&quot;div&quot; enter-active-class=&quot;Vue-Toastification__bounce-enter-active&quot; move-class=&quot;Vue-Toastification__bounce-move&quot; ... &gt; at &lt;VtTransition transition=&quot;Vue-Toastification__bounce&quot; class=&quot;Vue-Toastification__container bottom-center&quot; &gt; at &lt;VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position=&quot;bottom-center&quot; &gt; [Vue warn]: Unhandled error during execution of setup function at &lt;VContainer&gt; at &lt;MyComponent key=1 toast-id=0 onCloseToast=fn&lt;bound closeToast&gt; &gt; at &lt;VtToast key=&quot;_default00&quot; position=&quot;bottom-center&quot; draggable=true ... &gt; at &lt;TransitionGroup tag=&quot;div&quot; enter-active-class=&quot;Vue-Toastification__bounce-enter-active&quot; move-class=&quot;Vue-Toastification__bounce-move&quot; ... &gt; at &lt;VtTransition transition=&quot;Vue-Toastification__bounce&quot; class=&quot;Vue-Toastification__container bottom-center&quot; &gt; at &lt;VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position=&quot;bottom-center&quot; &gt; [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 &lt;VContainer&gt; at &lt;MyComponent key=1 toast-id=0 onCloseToast=fn&lt;bound closeToast&gt; &gt; at &lt;VtToast key=&quot;_default00&quot; position=&quot;bottom-center&quot; draggable=true ... &gt; at &lt;TransitionGroup tag=&quot;div&quot; enter-active-class=&quot;Vue-Toastification__bounce-enter-active&quot; move-class=&quot;Vue-Toastification__bounce-move&quot; ... &gt; at &lt;VtTransition transition=&quot;Vue-Toastification__bounce&quot; class=&quot;Vue-Toastification__container bottom-center&quot; &gt; at &lt;VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position=&quot;bottom-center&quot; &gt; 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)</pre> <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);