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

Question

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

演示