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.
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.