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文件）一个方法。下面的代码是示例：

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

以上代码将起作用并显示警报。这将有效，因为我传递了这个。$ 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，以便全局使用。

如何在Action Files Vue JS

1 个答案: