如何在Action Files Vue JS中使用插件

Question

我们正在使用https://github.com/mazipan/vue2-simplert-plugin

在我们的Main.js中

import Simplert from 'vue2-simplert-plugin'
Vue.use(Simplert)

在xxx.vue文件中，我们可以调用

var infoMessageBox= {
  message: "",
  type: 'info',
  onClose: this.onClose
};
this.$Simplert.open(infoMessageBox);

这可以正常工作。

现在棘手的部分来了。 我们将调度（动作文件）称为方法。 下面的代码是示例：

var requestMessage = {
  customerId: "",
  accessToken: "",
  store: this.$store,
  redirect: true,
  insideThis: this,
  network: "",
  alertbox: this.$Simplert,
};
this.$store.dispatch('checkIfCustomerExists', requestMessage);

这是动作文件

import Vue from "vue";

export const checkIfCustomerExists = (context, request) => {
  var infoMessageBox= {
    message: "",
    type: 'info',
    onClose: this.onClose
  };
  request.alertBox.open(infoMessageBox)
};

上面的代码将起作用并显示警报。 这将起作用，因为我通过了this。$ Simplert作为参数。

但是我不想每次都传递给参数。 我想以某种方式在此操作文件中访问它。 我需要进行一些导入或类似的操作？？ 如何在不将其作为参数发送的情况下使用此Simplert。

更新1：建议使用总线事件。 我创建了一个文件event-bus.js

  import Vue from 'vue';
  export const EventBus = new Vue();

在Vue文件中，我发出了：

  import { EventBus } from '../../../../store/event-bus.js';


EventBus.$emit('i-got-clicked',this.$Simplert);

var requestMessage = {
  customerId: "",
  accessToken: "",
  store: this.$store,
  redirect: true,
  insideThis: this,
  network: "",
  alertbox: this.$Simplert,
};
this.$store.dispatch('checkIfCustomerExists', requestMessage);

但是在动作文件中。

  import { EventBus } from '../../../../store/event-bus.js';

  EventBus.$on('i-got-clicked', Simplert => {
    console.log("adsasda");
    Simplert.open(infoMessageBox);
});

控制台无法打印。 所以我想这是不活跃的。

Answer 1

似乎插件已经使用事件总线来触发打开/关闭事件，因此您应该能够通过注册到Vue的插件实例来访问该事件

在您的商店中，尝试

import Vue from 'vue'

// snip

export const checkIfCustomerExists = (context, request) => {
  // snip
  Vue.prototype.$Simplert.open(infoMessageBox)
}

---

请注意，这对我来说似乎很棘手。 我建议您向维护人员提出功能请求，以公开SimplertEventBus以便可以在全球范围内使用它。