如何在独立的javascript文件中制作Bootstrap-vue Toast

Question

学习了几天vue.js，想做一个展示Toast的功能，看官方bootstrap-vue 文档：https://bootstrap-vue.org/docs/components/toast#toasts-on-demand，我能够通过组件实例注入和自定义组件制作toast，但是，我想要通过独立的 javascript 函数 /file 制作另一个自定义 toast，以便我可以动态调用它。

这是我使用注入的Cart.vue代码：

<script>
export default {
  methods: {
    purchaseHandler() {
      this.$bvToast.toast('The item added to your cart', {
          title: 'Notification',
          variant: 'succes',
          solid: true
        })
    },
  },
};
</script>

但是，我制作了一个 custom-toast.js 作为一个独立的 js function/file 并按照文档所述导入了插件：

import Vue from 'vue'
import { ToastPlugin } from 'bootstrap-vue'
Vue.use(ToastPlugin)

export default () => {
    this.$bvToast.toast('Toast body content', {
        title: 'Toast test',
        variant: 'succes',
        solid: true
      })
}

然后我将 custom-toast.js 导入到我的 Cart.vue 文件中，现在它看起来是这样的：

<script>
import customToast from "./custom-toast";
export default {
  methods: {
    purchaseHandler() {
      customToast()
  },
};
</script>

现在出现错误：

[Vue warn]：v-on 处理程序错误：“TypeError：无法读取未定义的 属性 '$bvToast'”

TypeError: 无法读取未定义的 属性 '$bvToast'

我知道这是超级基本的东西，它认为我可以通过在独立的 js 文件中找到等效的 this.$bvToast 注入来解决它，但我做不到随便找找，由于本人对Vue js的了解还少，真题

1. 什么是 this.$bvToast 或任何 bootstrap-vue 注入独立的 js 文件？
2. 如何解决这个问题？

谢谢。抱歉英语不好

Answer 1

你可以在 https://vuejs.org/v2/guide/mixins.html 中创建一个 mixin 文件。在脚本部分导入和声明 mixin 后，您可以在 mixin 中调用函数。