Как использовать Toasted внутри экспорта по умолчанию {}

Question

Я пытаюсь использовать пакет Toasted , но мне трудно понять, как его использовать.

У меня есть пакет с именем TreatErrors.js, и я вызываю егопакет для обработки всех ошибок из моего приложения, основанный на HTTP-коде, возвращаемом API-интерфейсом restfull API.

TreatErrors.js

import toasted from 'vue-toasted';
export default {
  treatDefaultError(err){
    let statusCode = err.response.status;
    let data = err.response.data;
    for(let field in data.errors){
      if (data.errors.hasOwnProperty(field)) {
        data.errors[field].forEach(message => {
          toasted.show(message);
        })
      }
    }

    if(statusCode === 401){
      toastr.error('Your token has expired. Please logout and login again to retrieve a new token');
    }

    return null;
  },
}

, и я пытаюсь вызвать Toasted из этогопакет, но я получаю vue_toasted__WEBPACK_IMPORTED_MODULE_2___default.a.show is not a function.Любая идея, как я могу использовать это Toasted внутри моего собственного определенного пакета?

Answer 1

Плагин vue-toasted сначала должен быть зарегистрирован в Vue:

import Toasted from 'vue-toasted';
Vue.use(Toasted); // <-- register plugin

Затем ваш модуль может использовать его через Vue.toasted.show(...):

// TreatErrors.js
export default {
  treatDefaultError(err) {
    Vue.toasted.show(err.message);
  }
}

И ваши компоненты Vue могуттакже используйте его через this.$toasted.show(...):

// Foo.vue
export default {
  methods: {
    showError(err) {
      this.$toasted.show(err.message);
    }
  }
}