写 Nuxt 遇到第一个 Bug

2024-02-23 · 周五一般

今天折腾了好久的 NuxtJS,发现一个 useFetch 的 Bug,请求参数改变了重新请求居然不会变化(写法 123 都不行),服了。

找了 @戴兜 大佬,他用了一个看上去很神奇的方式给解决了,不得不说 Vue 的一些奇奇怪怪的特性,也不见得比 React 好到哪里去啊。目前怀疑的点主要还是 .value,因为这样写意味着那个对象不再是响应式属性了。

const route = useRoute();
const query = computed(() => ({
  page: Number(route.query.page) || 1,
}));
const { data, refresh } = await useFetch(`/api/say/page`, {
  // 写法 1
  query: {
    page: route.query.page,
  },
  // 写法 2
  query: {
    page: route.query.page || 1,
  },
  // 写法 3
  query: {
    page: query.value.page || 1,
  },
  // 写法 4(戴兜大佬)
  query: {
    page: computed(() => route.query.page || 1),
  },  
  // 写法 5(我)
  query: computed(() => ({
    page: route.query.page || 1,
  })),  
});
Paul

Paul

特立独行的一只前端菜狗。这篇日记编写大概耗时了 3 分钟,内容均为个人原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!如本站内容对你有所帮助的话,不妨 捐助支持 一下?

奇趣音乐盒技术源于 Kico Player
Emmm,这里是歌词君