@aws-amplify/ui-components - 使用自定義消息觸發 Toast

Question

我正在使用已棄用@aws-amplify/ui-components庫（對於 Vue 2）。 它帶有一個 Toast 組件 ( <amplfy-toast /> )，它會在屏幕頂部提醒錯誤消息。 在我的 Vue.js 組件中，我想以編程方式觸發消息，其中console.log()是：

    watch: {
        authState: {
            async handler(state) {
                const data = this.authData
                if (state === 'signedin') {
                    try {
                        const local = await this.axios.post('/api/v1/authentication/login', {
                            token: data.getSignInUserSession().getIdToken().getJwtToken()
                        })
                        if ( ! local.data.error) {
                            await this.$store.dispatch('login', data)
                        }
                    } catch (error) {
                        console.log(error) // Trigger toast here.
                    }
                }
            },
            immediate: true
        }
    },

我怎樣才能做到這一點？

Answer 1

您可以使用dispatchToastHubEvent() function 或簡單地調用：

Hub.dispatch('UI Auth', {
    event: 'ToastAuthError',
    message: error.message
})