[Vue警告]：inject()只能在安装程序()或功能组件中使用
[Vue警告]：inject()只能在安装程序()或功能组件中使用
提问于 2022-05-29 16:14:12
我想使用来自PrimeVue库的Toast组件，我也想为它创建一个很好的可重用服务，但是我正在收到这个错误。如果我不尝试为Toast通知提取一个单独的服务，这似乎不是一个问题。
但是我确实想从我的自定义服务中调用useToast()，而不是直接在组件的setup函数中调用。
我使用的是Vue 3.2.25和Vite.js 2.9.9以及最新版本的PrimeVue
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Unhandled error during execution of native event handler
at <App>
Uncaught Error: No PrimeVue Toast provided!
at useToast (usetoast.esm.js:8:15)
at Proxy.showToast (toastService.js:4:19)
at _createElementVNode.onClick._cache.<computed>._cache.<computed> (App.vue:4:21)
at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js:369:13)下面是一个CodeSandbox链接：https://codesandbox.io/s/prime-vue-toast-issue-owcio8?file=/src/services/toastService.js
这是我的main.js
import App from './App.vue'
import { createApp } from 'vue'
import PrimeVue from 'primevue/config';
import 'primevue/resources/primevue.min.css';
import 'primevue/resources/themes/lara-dark-blue/theme.css';
import ToastService from 'primevue/toastservice';
const app = createApp(App);
app.use(PrimeVue);
app.use(ToastService);
app.mount('#app')这是我的App.vue
<template>
<Toast />
<button @click="showToast">Show toast!</button>
</template>
<script setup>
import Toast from 'primevue/toast';
import { showToast } from './services/toastService';
</script>这是我的toastService.js:
import { useToast } from "primevue/usetoast";
const showToast = () => {
const toast = useToast();
toast.add({ severity: 'info', detail:'Hello' });
}
export { showToast }Stack Overflow用户
回答已采纳
发布于 2022-05-29 16:41:00
在创建组件实例时，Vue可组合主要是在安装函数中直接使用。其中一些可以在其他地方使用，但这取决于可组合的实现，应该进一步确认。
错误表明useToast在内部使用inject，这限制了这种可组合的使用。
对于可重用的服务，它可以是：
import { useToast } from "primevue/usetoast";
export const useToastService = () => {
const toast = useToast();
const showToast = () => {
toast.add({ severity: 'info', detail:'Hello' });
}
return { showToast };
};并用于：
const { showToast } = useToastService();PrimeVue Toast实现中的任何东西实际上都不需要使用useToast可组合，它是一个方便的助手；参见这和这。由于在下一次主要的库更新中重构吐司服务的风险，可以将其简化为使用：
import ToastEventBus from 'primevue/toasteventbus';
export const useToastService = () => {
const showToast = () => {
ToastEventBus.emit('add', { severity: 'info', detail:'Hello' });
}
return { showToast };
};这样，在应用程序的任何地方，例如在路由器中，都可以谨慎地使用该服务。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72425297
复制相关文章
相似问题
腾讯云开发者
