在 VUE 3 的异步方法中调用 SweetAlert2

如何解决在 VUE 3 的异步方法中调用 SweetAlert2

如果从服务器检索数据失败，我试图弹出sweetalert

我在 main.js 中导入了 Sweet Alert :

import VueSweetalert2 from 'vue-sweetalert2'
import 'sweetalert2/dist/sweetalert2.min.css'

const app = createApp(App)
app.use(VueSweetalert2)
app.mount('#app')

在 Table.vue 组件中，我尝试调用 swal，但收到一个错误消息，显示为 (undefined $this.swal) ：

<script>
import axios from 'axios'
import { onMounted,ref } from 'vue'

export default {
    setup() {
        let transactions = ref([])

        onMounted(() => {
            getTransactions()
        })

        async function getTransactions() {
            try {
                let { data } = await axios.get('http://127.0.0.1:8000/api/transactions')
                transactions.value = data.data
            } catch(e) {
                this.$swal('Something went wrong.')
            }
        }

        return {
            transactions
        } 

    }
}
</script>

有什么建议可以解决这个问题吗？

解决方法

您不能使用 this 作为 setup() 内的组件实例，因为该组件尚未创建。还有其他方法可以获取该 $swal 属性。

vue-sweetalert2 通过 app.config.globalProperties.$swal 或作为 provide-ed $swal prop 公开 SweetAlert。

在 Composition API 中使用它的一种简单方法是通过 inject()：

import { inject } from 'vue'

export default {
    setup() {
        const swal = inject('$swal')

        async function getTransactions() {
            //...
            swal('Something went wrong.')
        }
    }
}

demo 1

但是，vue-sweetalert2 文档建议在这种情况下直接使用 sweetalert2：

当使用“Vue3：Composition API”时，最好不要使用这个包装器。直接调用sweetalert2更实用。

您可以像这样直接使用 sweetalert2：

import { onMounted,inject } from 'vue'
import Swal from 'sweetalert2'

export default {
  name: 'App',setup() {
    async function getTransactions() {
      //...
      Swal.fire('Something went wrong.')
    }

    onMounted(() => getTransactions())
  }
}

demo 2