Gridsome + AWS Amplify - 导入事件总线中断注销按钮组件

Question

我已经成功地将 AWS Amplify 的 Auth UI 功能和组件与 Gridsome 集成以实现简单的 login/logout 功能，但是当我尝试使用

访问 Amplify 事件总线时

import { AmplifyEventBus } from "aws-amplify-vue"

我收到错误：

Error in mounted hook (Promise/async): "TypeError: Cannot read property 'Logger' of undefined"

我发现了一个类似的问题on the github post并添加了建议

Vue.prototype.$Amplify = Amplify;

确实删除了警告，但 Auth UI Logout 组件将不再显示。我可以登录，但未显示注销按钮。我不明白为什么访问事件总线需要我将 Amplify 添加到 Vue 原型，而 UI 组件已经在没有它的情况下工作，为什么即使我添加它组件仍然没有出现。

Answer 1

AmplifyEventBus已经停产，所以现在被认为是Legacy

而是使用 Hub.listen，像这样：

<script>
import { Hub } from 'aws-amplify'

export default {
  mounted() {
    Hub.listen('auth', (info) => {
      console.log('auth event:', info)
    })
  },
}
</script>

Logger也可以用同样的方式导入，如：

import { Hub, Logger } from 'aws-amplify'

Gridsome + AWS Amplify - 导入事件总线中断注销按钮组件

Gridsome + AWS Amplify - Importing Event Bus breaks Logout Button Component

authentication

amazon-web-services

vue.js

aws-amplify

gridsome