<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 } 從 "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 } 從 "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: {…}} 錯誤： -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);