如何在导出默认 {} 中使用 Toasted答案

【问题标题】：How to use Toasted inside an export default {}如何在导出默认 {} 中使用 Toasted
【发布时间】：2019-02-09 20:33:24
【问题描述】：

我正在尝试使用包 Toasted，但我很难理解如何使用它。

我有一个名为 TreatErrors.js 的包，我调用这个包来处理来自我的应用程序的所有错误，基于由 API 和 restfull API 返回的 HTTP 代码。

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 吗？

【问题讨论】：

标签： vue.js vuejs2 vue-toasted

【解决方案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);
    }
  }
}

【讨论】：