定义全局变量以在组件内部使用答案

【问题标题】：Define global variables to use inside components定义全局变量以在组件内部使用
【发布时间】：2022-01-25 01:23:11
【问题描述】：

我有一个安装了 vue-sweetalert2 的 Laravel 8 项目。我想定义一次 Toast 行为，然后在我的组件中调用它。

现在我有这个代码：

/js/components/Mypage.vue

<script>
export default {
    data: function () {
        return { ... };
    },
    mounted() { ... },
    methods: {
        myMethod: function () {
            const Toast = this.$swal.mixin({
                toast: true,
                showConfirmButton: false,
                timer: 2000,
                timerProgressBar: false,
            });
            axios
                .post("/api/something")
                .then((res) => {
                    Toast.fire({
                        icon: "success",
                        title: "Tessera rinnovata",
                    });
                });
...
</script>

当然，这很好用，但正如您所见，Toast 是在方法内部定义的，我无法在其他地方重复使用它。

我想在 app.js 中定义它（也许），而不是在任何地方访问它，但是如果我按原样移动 app.js 中的代码，我会收到一个错误，告诉我 $swal 没有定义. 我尝试使用 Swal 而不是 $swal... 没有任何改变。

/js/app.js

import VueSweetalert2 from "vue-sweetalert2";
import "sweetalert2/dist/sweetalert2.min.css";

window.Vue = require("vue").default;
import VueRouter from "vue-router";

Vue.use(VueRouter);
Vue.use(VueSweetalert2);

const Toast = $swal.mixin({
    toast: true,
    showConfirmButton: false,
    timer: 2000,
    timerProgressBar: false,
});

那么，我怎样才能定义 Toast 一次呢？

【问题讨论】：

你可以为这种用例创建一个插件
不知道怎么样，我去看看
请看这个 repo 这是我创建的通知插件的演示 https://github.com/bhumit070/notification-plugin 在这个我使用 vuetify 的 toast 但你可以用甜蜜的警报替换它

标签： javascript vue.js laravel-8

【解决方案1】：

您似乎正在尝试使用初始化选项设置 SweetAlert 实例（您的组件中的this.$swal）。这可以在安装vue-sweetalert 插件时完成。 Vue.use() 的第二个参数是插件选项：

// js/app.js
import Vue from 'vue'
import VueSweetAlert from 'vue-sweetalert2'

Vue.use(VueSweetAlert, {
  toast: true,
  showConfirmButton: false,
  timer: 2000,
  timerProgressBar: false,
})

demo

【讨论】：