如何让 Vue 应用程序中的所有组件都可以使用 Buefy toast？

Question

在 Vue 应用程序的组件中，以下方法在用户单击表单上的“提交”按钮后运行：

execute() {                    
            let message = '';
            let type = '';

            const response = this.actionMode == 'create' ? this.createResource() : this.updateResource(this.data.accountId);

            response.then(() => {
                message = 'Account ' + this.actionMode + 'd for ' + this.data.name;
                type = 'is-success';
            })
            .catch(e => {
                message = 'Account <i>NOT</i> ' + this.actionMode + 'd<br>' + e.message;
                type = 'is-danger';
            })
            .then(() => {
                this.displayOutcome(message, type);
                this.closeModal();
            });
        }

同一组件中的 displayOutcome() 方法如下所示：

displayOutcome(message, type) {
            this.$buefy.toast.open({
                duration: type == 'is-danger' ? 10000 : 3500,
                position: 'is-bottom',
                message: message,
                type: type
            });
        }

代码在组件中运行良好。现在我正在尝试将 displayOutcome() 方法移动到 helpers.js 文件中并导出该函数，以便应用程序中的任何组件都可以导入它。这将集中维护 toast，并防止在每个需要一个的组件中编写单独的 toast。无论如何，当 displayOutcome() 移动到 helpers.js，然后导入组件时，当函数被触发时，控制台会出现错误：

我怀疑它与引用 Vue 实例有关，所以我试验了 main.js 文件并更改了这个

new Vue({
    router,
    render: h => h(App),
}).$mount('#app');

至此

var vm = new Vue({
    router,
    render: h => h(App),
}).$mount('#app');

然后在 helpers.js

export function displayOutcome(message, type) {
    // this.$buefy.toast.open({
    vm.$buefy.toast.open({
        duration: type == 'is-danger' ? 10000 : 3500,
        position: 'is-bottom',
        message: message,
        type: type
    });
}

但这导致了“编译失败”。错误信息。

是否可以让 helpers.js 中的 displayOutcome() 以某种方式工作？

Answer 1

您可以在 Vuex store 中创建一个动作并从任何组件发送它。

Answer 2

displayOutcome() 需要引用 this 才能工作，如果您将其定义为组件对象上的方法（标准方式），这很好。但是，当您在外部定义它时，您只需提供任何 function 而不是 method，这是一个“针对”对象的函数。这种“定位”是通过this完成的。因此，当您从外部文件传递一个简单函数时，没有与特定对象的关联，因此没有 this 可用。

为了克服这个问题，您可以使用 displayOutcome.apply(thisArg, methodArgs)，其中 thisArg 将是函数中的 this 引用，而 methodArgs 是剩余的参数正在传递给函数。

因此 displayOutcome.apply(4, ['some', 'thing']) 意味着 displayOutcome() 中的 this 引用在这种情况下变为 4。

进一步阅读：

import { displayOutcome } from './component-utils'

// when calling displayOutcome() from within your component
displayOutcome.apply(this, ['Hello World', 'is-info'])

// component-utils.js
export function displayOutcome(message, type) {
    // this.$buefy.toast.open({
    this.$buefy.toast.open({
        duration: type == 'is-danger' ? 10000 : 3500,
        position: 'is-bottom',
        message: message,
        type: type
    });
}

如何让 Vue 应用程序中的所有组件都可以使用 Buefy toast？

how can a Buefy toast be made available to all components in a Vue app?

vue.js

buefy