<p>Apa yang saya cuba ialah vue-toastification menggunakan komponen tersuai dan beberapa komponen Vuetify dalam roti bakar. Saya mencipta repositori menggunakan <code>npm create vuetify@latest</code> dan memasang pustaka <code>npm i vue-toastification@latest</code>. Kemudian menggunakan pemalam: </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); pilihan const = { shareAppContext: benar, // Daripada https://github.com/Maronato/vue-toastification#access-global-components-and-plugins-inside-toasts kedudukan: POSITION.BOTTOM_CENTER, }; registerPlugins(app); app.use(Roti bakar, pilihan); </code></pre> <p>Kemudian saya cuba memanggil roti bakar menggunakan kod berikut: </p> <pre class="lang-js prettyprint-override"><code>// store/error.ts import { useToast } daripada "vue-toastification"; import MyComponent daripada "@/components/MyComponent.vue"; const toast = useToast(); export const useErrorStore = defineStore("ralat", () => { function locationError() { roti bakar(MyComponent); } }); </code></pre> <p>Dalam komponen saya: </p> <pre class="lang-js prettyprint-override"><code>// components/MyComponent.vue <template> <div class="bekas"> <v-bekas> <v-row> <v-col> contoh Makluman </v-col> <v-col> <v-btn @click="muat semula">Muat Semula</v-btn> </v-col> </v-row> </v-bekas> </div> </template> <penyiapan skrip lang="ts"> muat semula fungsi() { jika (jenis tetingkap !== "tidak ditentukan") { window.location.reload(); } } </skrip> </code></pre> <p>我从App.vue文件中调用它：</p> <pre class="lang-js prettyprint-override"><code>// App.vue <template> <v-app> <v-utama> <v-btn @click="loc">Ralat Lokasi</v-btn> </v-utama> </v-app> </template> <penyiapan skrip lang="ts"> import { useErrorStore } daripada "./store/error"; const errorStore = useErrorStore(); fungsi loc() { errorStore.locationError(); } </skrip> </code></pre> <p>但是在运行时，当我点击按钮时，我得到以下错误：</p> <pre class="brush:php;toolbar:false;">[Vue warn]: suntikan "Symbol(vuetify:defaults)" tidak ditemui. di <VContainer> di <Kunci Komponen Saya=1 toast-id=0 onCloseToast=fn<bound closeToast> > di <VtToast key="_default00" kedudukan="bawah-tengah" draggable=true ... > di <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... > di <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__pusat bawah bekas" > di <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position="bawah -pusat" > [Vue warn]: Ralat tidak dikendalikan semasa melaksanakan fungsi persediaan di <VContainer> di <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > di <VtToast key="_default00" kedudukan="bawah-tengah" draggable=true ... > di <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... > di <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__pusat bawah bekas" > di <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …}kedudukan="bawah-tengah" > [Vue warn]: Ralat tidak terurus semasa melaksanakan flush penjadual. Ini berkemungkinan pepijat dalaman Vue. Sila buka isu di https://new-issue.vuejs.org/?repo=vuejs/core di <VContainer> di <MyComponent key=1 toast-id=0 onCloseToast=fn<bound closeToast> > di <VtToast key="_default00" kedudukan="bawah-tengah" draggable=true ... > di <TransitionGroup tag="div" enter-active-class="Vue-Toastification__bounce-enter-active" move-class="Vue-Toastification__bounce-move" ... > di <VtTransition transition="Vue-Toastification__bounce" class="Vue-Toastification__pusat bawah bekas" > di <VueToastification eventBus= EventBus {allHandlers: {…}} shareAppContext= {_uid: 0, _component: {…}, _props: null, _container: div#app, _context: {…}, …} position="bawah -pusat" > Ralat tidak ditangkap (dalam janji): [Vuetify] Tidak dapat mencari contoh lalai di injectDefaults (defaults.ts:28:24) pada persediaan (defineComponent.tsx:118:24) di callWithErrorHandling (runtime-core.esm-bundler.js:158:18) di setupStatefulComponent (runtime-core.esm-bundler.js:7236:25) di setupComponent (runtime-core.esm-bundler.js:7197:36) di mountComponent (runtime-core.esm-bundler.js:5599:7) di processComponent (runtime-core.esm-bundler.js:5565:9) pada patch (runtime-core.esm-bundler.js:5040:11) di mountChildren (runtime-core.esm-bundler.js:5284:7) di 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);