Nuxt 3 useFetch 请求数据不渲染，怎么解决？

站长

2024年07月02日 08:51 · 阅读数 9

// ~data/article.ts
export const useArticleList = (options: ArticleListOptions) => {
  const { pending, data: result } = postFetch('/notebook', options)
  return {
    result,
    pending
  } as any
}

// list.vue
const { result } = useArticleList({
  current: current.value
})

const articleList = computed(() => {
  if (result.value) {
    const { code, data, msg } = result.value
    if (code === 200) {
      return data
    } else {
      console.error(new Error(msg))
    }
  }
  return [] as any[]
})

上述代码在开发阶段，pc 和移动端模拟器中访问，数据请求正常且渲染成功；部署服务器后，移动端真机没有发起请求，其他访问方式正常。有无大佬遇到过或知道怎么解决？

目标站点(未备案) http://114.132.79.6/

1个回答

test

2024-07-02

经过排查，依旧不知道是什么原因导致的。现在请求方式依旧，但在接收时加了个 pending 用来做加载中提示，计算里面的 result.value 改为 unref(result)，稍微等待后可以拿到返回数据。

const { result, pending } = useArticleList({
  current: current.value
})

const articleList = computed(() => {
  if (!pending.value) {
    const { code, data, msg } = unref(result)
    if (code === 200) {
      return data
    } else {
      console.error(new Error(msg))
    }
  }
  return [] as any[]
})

然后，代码体积大了 1.5MB，我不理解 answer image

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容