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

Question

我学习vue.js已经有几天了，我想制作一个显示 Toast 的函数，阅读官方 bootstrap-vue 文档： https: //bootstrap-vue.org/docs/components/toast# toasts-on-demand，我能够通过组件实例注入和自定义组件制作 toast ，但是，我想通过独立的javascript 函数/文件制作另一个自定义 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 函数/文件，并按照文档所述导入了插件：

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'”

类型错误：无法读取未定义的属性“$bvToast”

我知道这是超级基本的东西，它认为我可以通过在独立的js文件中找到相当于this.$bvToast注入来解决它，但我找不到任何东西，因为我对Vue js的了解还很少，真正的问题

1. 独立 js 文件中的this.$bvToast或任何 bootstrap-vue 注入相当于什么？

2. 我该如何解决这个问题？

谢谢。抱歉英语不好

Answer 1

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