VueJs 3 和 InertiaJs 脚本设置访问全局属性

Question

我正在尝试使用一种简单的方法来设置我的 InertiaJs / VueJs 3 / Laravel 应用程序来发出和侦听事件 - 通常称为事件总线。

我做了一些挖掘，发现了 mitt 包，我使用以下方法将其注册为 vue 实例上的全局变量：

createInertiaApp({
  resolve: (name) => {
    const page = require(`./Pages/${name}`).default;
    page.layout = page.layout || AppLayout;
    return page;
  },
  setup ({ el, App, props, plugin }) {
    const emitter = mitt();

    const myApp = createApp({
      render: () => h(App, props),
    });

    myApp.config.globalProperties.$emitter = emitter;

    myApp.use(plugin).mount(el);

    emitter.on('error', (payload) => alert(payload));
  }
});

现在，我遇到的问题是我正在使用

<script setup>

，而且我似乎无法访问本节中的全局变量。

<script setup>

const submit = () => {
  $emitter.emit('error', 'An error occurred');
};

</script>

在上面的示例中调用

submit

方法会抛出错误并提示：

未捕获的引用错误：$emitter 未定义

我也尝试过使用

getCurrentInstance

，但再次没有任何运气。

有什么方法可以让它与

<script setup>

一起工作吗？

Answer 1

在您的脚本设置中，使用：

const instance= getcurrentinstance()

let emitter=instance.appcontext.config.globalproperties.$emitter;

emitter.emit('error', 'an error occurred');