Используйте vue -sweetalert2 из плагина ax ios в Nuxt - PullRequest
Новая
       114

Используйте vue -sweetalert2 из плагина ax ios в Nuxt

0 голосов
/ 09 июля 2020

Я создаю перехватчик для обработки ошибок из @nuxtjs/axios в моем Nuxt приложении, но когда я пытаюсь вызвать vue-sweetalert2 из плагина ax ios, чтобы показать сообщения об ошибках, он выдает мне: $swal is not a function.

У меня есть плагин предупреждений, и я импортировал его в раздел плагинов в nuxt.config, я использую его для глобального импорта Sweetalert и для обработки глобального загрузчика, он работает в другие моменты, но не при попытке вызвать это из ax ios: 

//plugins/alerts.js

import Vue from 'vue'


// I remove the following two lines when I import swal directly as a module in nuxt.config.js

import VueSweetalert2 from 'vue-sweetalert2';
Vue.use(VueSweetalert2);

Vue.mixin({
    methods: {
        alertLoading(action, message = "") {
            if (action === "show") {
                this.$swal.fire({
                    title: message,
                    imageUrl: "/img/Loader.gif",
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    showCancelButton: false
                });
            } else {
                this.$swal.close()
            }
        },
        alertError(title, msg = undefined) {
            this.$swal(title, msg, 'error')
        }
    }
})

Мой axios.js плагин: 

/* I've trid importing it directly and doesn't work
import Vue from 'vue'

import VueSweetalert2 from 'vue-sweetalert2';
Vue.use(VueSweetalert2);*/

export default async ({ app, $axios }, inject) => {
    $axios.defaults.withCredentials = true;
    $axios.defaults.mode = "no-cors"

    $axios.onError(error => {
        cont response = error.response
        if (response && response.data && response.data.msg) {
            this.$swal("Error", response.data.msg, "error") // TypeError: Cannot read property '$swal' of undefined
            // app.$swal("Error", response.data.msg, "error") //app.$swal is not a function
        }
    })
}

Я попытался добавить этот код также в свой плагин, но безуспешно: 

const swal = require('vue-sweetalert2')
swal({
    title: 'Error', 
    text: 'Error', 
    confirmButtonColor: "#895CF2",
    confirmButtonText: 'Close',
    type: 'error'
})

Как мне вызвать $ swal из этого экземпляра ax ios? Есть ли способ получить доступ к экземпляру Nuxt this?

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 13 июля 2020

Эта ошибка появляется, если vue-sweetalert2 неправильно настроен как модуль Nuxt. Ваша конфигурация Nuxt должна содержать следующую запись в массиве modules:

nuxt.config. js: 

module.exports = {
  modules: [
    'vue-sweetalert2/nuxt',
  ]
}

Кроме того, вы не необходимо явно установить плагин:

plugins / ax ios. js: 

// XXX: No need to install `vue-sweetalert2` here
// import Vue from 'vue'
// import VueSweetalert2 from 'vue-sweetalert2';
// Vue.use(VueSweetalert2);

export default async ({ app }) => {
  app.$swal('hello world')
}

GitHub demo

...