如何在 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);

这样可以正常工作。

棘手的部分来了。我们将调用 dispatch (Action file) 方法。下面的代码是示例：

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。

更新一：建议使用总线事件。 我创建了一个文件事件-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 以便它可以在全球范围内使用。

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

How to use plugins in Action Files Vue JS

vue.js

vuejs2

vuex