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

Question

We are using https://github.com/mazipan/vue2-simplert-plugin

In our Main.js

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

In the xxx.vue file, we can call

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

This can work normally.

Now the tricky part comes. We will call dispatch (Action file) a method. Below code is example:

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

Here is the action file

import Vue from "vue";

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

Above code will work and show the alert. This will work because I passed the this.$Simplert as parameter.

But I dont want to pass everytime to the parameter. I want to access it somehow inside this action file. I need to do some import or something like that?? How can I use this Simplert without sending it as parameter.

Update 1: Suggestion is to use bus event. I created a file event-bus.js

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

In the Vue file I do emit:

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

However in the action file.

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

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

console is not printing. So I suppose this is not active.

Answer 1

Seems the plugin already uses an event bus for triggering the open / close events so you should be able to tap in to that via the plugin instance registered into Vue

In your store, try

import Vue from 'vue'

// snip

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

---

Note, this seems pretty hacky to me. I'd advise you to raise a feature request with the maintainers to expose the SimplertEventBus so it can be used globally.