Vuetify在Vue-Toastification中无法加载默认值
P粉147045274
2023-08-30 19:12:35
<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>
Vuetify组件必须包裹在VApp元素内。 默认情况下，vue toastification容器附加到HTML body上（使其成为VApp容器的兄弟）。 要解决此问题，您可以在安装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);Container是toast应该挂载的元素：HTMLElement或返回/解析为HTMLElement的函数。 Vuetify App元素应该是一个id为#app的div
要访问组件中可能使用的其他全局插件，例如i18n中的$t，您可能还希望访问应用程序上下文。可以通过添加shareAppContext选项来实现。 更多信息