如何将路由查询设置为 useAsyncData 监视属性

Question

我希望 useAsyncData 在路由查询更改时重新启动

我在我的脚本设置中尝试过这个

const route = useRoute()
 await useAsyncData(
  'products',
  () => {
    // some code
  },
  {
    watch: [pageNumber, route.query]
  }
)

但这行不通。提前

Answer 1

如果它像常规 Vue 观察器一样工作，则无法观察响应式对象的属性。标准 Vue 观察器有一个解决方法（使用 getter），但我不确定

useAsyncData

是否支持相同的方法。如果您将

route.query

替换为计算属性，它可能会起作用。

const route = useRoute()
const routeQuery = computed(() => route.query)
await useAsyncData(
  'products',
  () => {
    // some code
  },
  {
    watch: [pageNumber, routeQuery]
  }
)