Vuetify tidak boleh memuatkan nilai lalai dalam Vue-Toastification

Question

Apa yang saya cuba ialah vue-toastification menggunakan komponen tersuai dan beberapa komponen Vuetify dalam roti bakar. Saya mencipta repositori menggunakan npm create vuetify@latest dan memasang pustaka npm i vue-toastification@latest. Kemudian menggunakan pemalam:

<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>

Kemudian saya cuba memanggil roti bakar menggunakan kod berikut:

<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>

Dalam komponen saya:

<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>

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

<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>

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

[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)

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

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

Answer 1

Komponen Vuetify mesti dibalut dalam elemen VApp. Secara lalai, bekas vue toastification dilampirkan pada badan HTML (menjadikannya adik beradik bekas VApp). Untuk menyelesaikan masalah ini, anda boleh menambah kod berikut semasa memasang pemalam vue toastification:

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

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

app.use(Toast, ToastOptions);

Bekas ialah elemen yang harus dipasang pada roti bakar: HTMLElement atau fungsi yang mengembalikan/menghuraikan ke HTMLElement. Elemen Apl Vuetify mestilah div dengan id #app

Untuk mengakses pemalam global lain yang mungkin digunakan dalam komponen, seperti $t dalam i18n, anda juga mungkin mahu mengakses konteks aplikasi. Ini boleh dicapai dengan menambah pilihan shareAppContext. Maklumat lanjut