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

Question

我有一个Laravel 8项目，安装了vue-甜警报2。我只想定义一次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,
});

那么，我怎样才能定义一次烤面包呢？

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,
})

演示