解决 Vue3 Toastify 在全局配置中无法识别 toast 对象的问题

第一段引用上面的摘要：

本文旨在解决 Vue3 Toastify 在全局配置中无法识别 toast 对象的问题。通过分析问题原因，提供明确的解决方案，并给出示例代码，帮助开发者正确配置 Vue3 Toastify 的全局过渡效果，避免 ReferenceError: toast is not defined 错误。

问题分析

在使用 Vue3 Toastify 时，你可能希望在 main.js 中全局配置 Toast 的过渡效果。按照官方文档，你可能会尝试以下代码：

立即学习“前端免费学习笔记（深入）”；

app.use(
  Vue3Toasity,
  {
    transition: toast.TRANSITIONS.FLIP,
  },
);

然而，这段代码会抛出 ReferenceError: toast is not defined 错误。这是因为 toast 对象并没有在 main.js 中被正确引入。

解决方案

要解决这个问题，需要在 main.js 中显式地从 vue3-toastify 导入 toast 对象。修改后的代码如下：

Groq

GroqChat是一个全新的AI聊天机器人平台，支持多种大模型语言，可以免费在线使用。

下载

import Vue3Toasity, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

// ... 其他代码

createApp(App)
    // ... 其他代码
    .use(
        Vue3Toasity,
        { 
            closeButton: false,
            containerClassName: 'toast-container-class',
            toastClassName: 'toast-class',
            bodyClassName: 'toast-body-class',
            progressClassName: 'progress-bar',
            autoClose: 30000,
            transition: toast.TRANSITIONS.BOUNCE, // 现在可以正常工作了
            style: {
              opacity: '1',
              userSelect: 'initial',
            },
        })
    .mount('#app')

代码解释

通过 import Vue3Toasity, { toast } from 'vue3-toastify'; 语句，我们不仅导入了 Vue3Toasity 组件，还导入了 toast 对象。这样，在全局配置中就可以正确访问 toast.TRANSITIONS 属性，从而设置全局的过渡效果。

完整示例

以下是一个完整的 main.js 示例，展示了如何正确配置 Vue3 Toastify 的全局过渡效果：

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'

import ClickOutside from "./directives/clickOutside.js";
import hapticDirective from "./directives/hapticDirective.js";

import Vue3Toasity, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

createApp(App)
    .directive("haptic", hapticDirective)
    .directive("click-outside", ClickOutside)
    .use(store)
    .use(router)
    .use(
        Vue3Toasity,
        { 
            closeButton: false,
            containerClassName: 'toast-container-class',
            toastClassName: 'toast-class',
            bodyClassName: 'toast-body-class',
            progressClassName: 'progress-bar',
            autoClose: 30000,
            transition: toast.TRANSITIONS.BOUNCE,
            style: {
              opacity: '1',
              userSelect: 'initial',
            },
        })
    .mount('#app')

总结

在使用 Vue3 Toastify 进行全局配置时，务必确保正确导入所需的对象。特别是 toast 对象，如果需要在全局配置中使用，必须显式地从 vue3-toastify 中导入。 这样可以避免 ReferenceError 错误，并确保全局配置生效。