[nuxt]useFetch客户端渲染 data返回为null

前边增加了个await nextTick() 解决了 但是不知道是否是正确的用法

我想实现进入页面购物车数量的加载，客户端发送请求，lazy:true 只是我的一个尝试

const { data, pending } = await useFetch('http://192.168.0.134:9900/api/order/quotationbar/queryQuotationBarNumber', {
            method: 'post',
            headers: {
                Authorization: 'bearer b70d7091-aa41-4857-9eec-1b1ef336043f',
            },
            lazy: true,
        })

在顶层，而不是嵌套在 onMounted 等中，这将是我所追求的。然后在您的模板中检查 v-if="pending" 并相应地呈现您的加载状态

https://www.nuxt.com.cn/docs/api/composables/use-fetch

那我应该如何正确的处理他，从客户端获取数据，目前我用await nextTick()解决了这个问题 但是我感觉这样式不科学的

onMounted中会立即触发useFetch的then，其中的data就为null，因此直接在then内进行缓存操作应该是不行的，我也在头疼这个问题，或许应该抛弃useFetch，而我的方式是封装useFetch，传入回调函数，在onResponseCallback中进行操作，感觉也并不是很棒。

use $fetch

我也遇到了这个问题，为什么第一次请求有，刷新浏览器就 Chrome网络面板就看不到发送的请求，useFetch返回的data为 null，网上说清缓存，useClearData试了没效果，

const cards = ref([])

async function queryAccess() {
  const defaultQueryObj = {
    conditions: [],
    limit: 10,
    start: 0,
    count: false,
    replyWithCount: true,
    noError: false,
    sortBy: 'createDate',
    sortDirection: 'asc',
  }

  const { data } = await useFetch('/website/api', {
    // key: 'queryAccess',
    method: 'POST',
    body: {
      'com.syscxp.header.website.access.APIQueryQuickAccessMsg': defaultQueryObj,
    },
  })
  return data.value as any
}

const dv = await queryAccess()
// await clearNuxtData('queryAccess')
const result = dv ? Object.values(JSON.parse(dv.result))[0] as any : {}
cards.value = result.success ? result.inventories : []
console.log('[ cards.value  ]-114', cards.value)

const cards = ref([])

async function queryAccess() {
  const defaultQueryObj = {
    conditions: [],
    limit: 10,
    start: 0,
    count: false,
    replyWithCount: true,
    noError: false,
    sortBy: 'createDate',
    sortDirection: 'asc',
  }
  await nextTick()
  const { data } = await useFetch('/website/api', {
    key: 'queryAccess',
    method: 'POST',
    body: {
      'com.syscxp.header.website.access.APIQueryQuickAccessMsg': defaultQueryObj,
    },
  })
  return data.value as any
}
// await clearNuxtData('queryAccess')
const dv = await queryAccess()
const result = dv ? Object.values(JSON.parse(dv.result))[0] as any : {}
cards.value = result.success ? result.inventories : []
console.log('[ cards.value  ]-114', cards.value)

@fxzer Check out https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables.

Instead of using useFetch in your queryAccess function, use $fetch directly.

set useNuxtApp().payload.serverRendered = false

set useNuxtApp().payload.serverRendered = false

这种方式就不走服务端渲染了，渲染页面能展示，但是检查网页源代码发现只渲染了空标签没实际的内容，这种方式还能做seo吗？