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

Question

我有一个 Laravel 8 项目，安装了 vue-sweetalert2。我想定义一次 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？

Answer 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

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

Define global variables to use inside components

javascript

vue.js

laravel-8