nuxt3 一个奇怪的问题

Vue 2022-07-16 135

上报警告的代码

<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane :label="item.label" :name="item.label" v-for="(item, index) in tabList" :key="index" lazy>
      <div class="article-wrapper" v-if="activeName === item.label && articleList[index]">
        <ArticleItem :item="item2" v-for="item2 in articleList[index]" :key="item2.id"/>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

// 获取数据
const getArticleListData = async (index = 0) => {
  const query = tabList.value[index].query
  const params = Object.assign({limit: 10, offset: 0, created_at: getCreatedAt()}, query)
  if (articleList.value[0].length === 0) {
    const {data} = await useAsyncData("article", () => $fetch("/api/article", {params}))
    const res: any = data.value
    articleList.value[index] = res.data
  } else {
    // 使用$fetch直接调用,它只会请求url的部分,不会传递参数
    const res: any = await $fetch("/api/article", {params})
    articleList.value[index] = res.data
  }
}
getArticleListData(0)

我是希望将ajax请求封装成一个函数,但是数据虽然渲染没有问题,但是控制台却报[Vue warn]: Hydration children mismatch in <div>警告问题,这能忍吗?排查了几个小时,一开始以为是因为因为二维数组的问题,测试了简单的demo后无果,

找到vue、nuxt的仓库查,尽管有差不多的异常,但是都没有值得借鉴的经验。

后来突发奇想,将ref类型的数据赋值放入useAsyncData函数后面,同样也会报警告,知道useAsyncData或者其他内置钩子函数需要在单独的作用域内使用,其实也可以想到,nuxt的这些钩子函数底层都是封装过的,与Vue的同构SSR一样,同构需要借助vuex,放入单独的函数内势必影响运行

正确的代码

if (articleList.value[0].length === 0) {
  console.log('server')
  const params = {limit: 10, offset: 0, created_at: getCreatedAt()}
  const { data } = await useAsyncData("article", () => $fetch("/api/article", {params}))
  if (data.value) {
    articleList.value[0] = data.value.data
  }
}
// 获取数据
const getArticleListData = async (index = 0) => {
  const query = tabList.value[index].query
  const params = Object.assign({limit: 10, offset: 0, created_at: getCreatedAt()}, query)
  // 使用$fetch直接调用,它只会请求url的部分,不会传递参数
  const res: any = await $fetch("/api/article", {params})
  articleList.value[index] = res.data
}

 

标签:Vue

文章评论

评论列表

已有0条评论