@aws-amplify/ui-components - 使用自定义消息触发 Toast

Question

I'm using @aws-amplify/ui-components library which is deprecated (for Vue 2). It comes with a Toast component ( <amplfy-toast /> )which alerts error messages in the top of the screen. In my Vue.js component I want to trigger message but programatically where the console.log() is:

    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
        }
    },

How can I do this?

Answer 1

You can do this with dispatchToastHubEvent() function or simply call:

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