Nuxt 3 上的 Vue Toastify 不更新 Toast

Question

我正在尝试在 Nuxt 3 上使用 vue-toastify 来更新 toast，尽管我正在努力让它更新，甚至只是基本文本。查看他们的文档后，我正在正确更新它，并且

toastId

返回相同的值。

这是我的代码

    const toastId = useNuxtApp().$toast.loading('I'm Loading!...', { timeout: -1 });  
    console.log(toastId)
    useNuxtApp().$toast.update(toastId, {
        render: 'Not loading anymore',
        autoClose: true,
        closeOnClick: true,
        closeButton: true,
        type: 'success',
        isLoading: false,
    });

我在这里做的事情根本就是错误的吗？

https://vue3-toastify.js-bridge.com/usage/update-toast.html#basic-example

Answer 1

您提供的代码有点复杂。您可以通过以下两种方式在 Nuxt 3 项目中实现 Vue Toastify。

方法 1 - 最常见的用法。

~/plugins/toastify.client.ts

不要忘记在文件名后缀

.client

。

import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify'
import 'vue3-toastify/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toasity) as ToastContainerOptions
})

组件使用。

<script lang="ts" setup>
import { toast, type ToastOptions } from 'vue3-toastify'
const notify = () => {
  toast("Hello World 12345", {
    autoClose: 5000,
    position: toast.POSITION.TOP_CENTER,
  } as ToastOptions)
}
</script>
<template>
  <div>
    <div>
      <button @click="notify">Notify !</button>
    </div>
  </div>
</template>
<style scoped lang="css"></style>

方法2

~/plugins/toastify.client.ts

import Vue3Toasity, { type ToastContainerOptions } from 'vue3-toastify'
import 'vue3-toastify/dist/index.css'
import { toast, type ToastOptions } from 'vue3-toastify'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Vue3Toasity) as ToastContainerOptions
  return {
    provide: {
      toastify: (msg: string) => {
        toast(msg, {
          autoClose: 5000,
          position: toast.POSITION.TOP_CENTER,
        } as ToastOptions)
      }
    }
  }
})

组件使用。

<script lang="ts" setup>
const { $toastify } = useNuxtApp()
</script>
<template>
  <div>
    <button @click="$toastify('Hello World I am toast.')">Notify !</button>
  </div>
</template>
<style scoped lang="css"></style>

经过测试，有效。希望这可以帮助！