如何在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以便可以在全球范圍內使用它。