如何让 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

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

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

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

进一步阅读：

• Understanding "This" in JavaScript
• this on MDN

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
    });
}

Answer 2

您可以在 Vuex 商店中创建一个动作并从任何组件中调度它。