在 Vue 之外使用 Buefy 组件答案

【问题标题】：Using a Buefy component outside of Vue在 Vue 之外使用 Buefy 组件
【发布时间】：2020-08-25 11:31:59
【问题描述】：

如何在 Vue 组件之外创建 Buefy notification？例如，我定义了以下 axios 拦截器，并尝试使用 Buefy 通知：

import axios from "axios";
import { Notification } from "buefy/dist/components/notification";

axios.interceptors.response.use(
  response => {
    if (response.data.flash) {
      Notification.open(response.data.flash);
    }
    return response;
  },
  error => {
    if (error.response) {
      Notification.open(error.response.data.flash);
      return Promise.reject(error.response);
    }
  }
);

export default axios;

这会导致控制台出现此错误：

[Vue 警告]：v-on 处理程序中的错误（Promise/async）：“TypeError: Cannot read property 'open' of undefined”

我做错了什么？

【问题讨论】：

标签： javascript vue.js buefy

【解决方案1】：

好的，发布后不久就找到了答案。把问题和答案放在一起，以防万一其他人遇到问题。显然，import { Notification } from "buefy/dist/components/notification" 是一种旧的导入方式，应该像这样导入：

import { NotificationProgrammatic as Notification } from "buefy";

【讨论】：