Below is a brief TypeScript module:
import { ref } from 'vue'
import { i18n } from '~/i18n'
import { ElMessageBoxOptions } from 'element-plus'
const { t } = i18n.global
export const toasts = ref<ElMessageBoxOptions[]>([])
export const showToast = async (options: ElMessageBoxOptions) => {
console.log("adding", options)
toasts.value.push(options)
}
export const showError = async (e: any) => {
var message : string
try {
message = t("" + e)
} catch (e) {
console.log(""+e)
message = t("general.something_strange_happened")
}
showToast({
type: 'error',
message: t('general.error') + " " + message,
})
}
export const showSuccess = async (message: string) => {
showToast({
type: 'success',
message: message
})
}
Additionally, here is a Vue component named Toast that makes use of the above module:
<script setup lang="ts">
import { watch } from 'vue'
import { ElMessageBox } from "element-plus";
import { toasts } from '~/lib/toast'
watch(toasts, () => {
console.log("toasts modified")
while (toasts.value.length) {
const opts = toasts.value.pop()!
ElMessageBox(opts)
}
})
</script>
<template>
<span>I'm present</span>
</template>
The Toast component is incorporated into App.vue. It is observed to be rendered successfully (the text "I'm present" is visible in the browser.)
Upon calling showSuccess("TEST") from another section, the following events occur:
is displayed in the console logadding {type: 'success', message: 'DOH'}- subsequently,
toasts modifieddoes not appear on the console log, and no further action takes place
To my understanding, watchers are inherently deep (refer: https://vuejs.org/guide/essentials/watchers.html#deep-watchers ), implying that the watcher function should trigger upon an addition to the array.
What could possibly be incorrect in this implementation?