Nuxt 3:通配符页面和useFetch的问题

Question

我遇到了一个通配符页面/pages/[...slug].vue和从后端获取的问题。

我有一个名为url的计算程序，用于：

const { data, refresh } = await useFetch(url.value)

然后我有一个观察者来刷新useFetch：

watch(url, (url, oldUrl) => {
  console.log(url)
  console.log(oldUrl)
  refresh()
})

在浏览器中，控制台日志显示正确的url，但useFetch只是再次加载旧的url。

知道这是怎么回事吗？谢谢。

编辑:澄清:这是浏览器中的导航，触发手表

Answer 1

我相信，因为computed是幕后的“getter”，所以您需要对其使用深度监视器，或者直接查看返回的值，否则监视函数将无法运行。

您可以将手表功能更改为：

watch(url, (url, oldUrl) => {
  console.log(url)
  console.log(oldUrl)
  refresh()
},
{ deep: true }
)

或者，您可以直接查看计算出的属性的值：

watch( () => url.value, (url, oldUrl) => {
  console.log(url)
  console.log(oldUrl)
  refresh()
},
{ deep: true }
)

这里有一些更多的信息：https://vuejs.org/guide/essentials/watchers.html#basic-example

Answer 2

嗨，两天前我也有过同样的问题。我猜这个问题的发生是因为默认的“保持活力”道具和内部缓存。

我的解决方案是使用$fetch()而不是useFetch()。

就像这样你也不需要守望者了。