Javascript 如何在使用Nuxt'获取数据时防止模板错误；s fetch（）钩子

我正在尝试将我的vue应用程序转换为nuxt应用程序。在我的vue应用程序中，我轻松地使用了vue slick corousel。但是，对于nuxt，经过必要修改后的相同代码，corousel无法进行刷新。如果我实时编辑模板或在不刷新页面的情况下导航应用程序，那么它在第二次访问页面时就可以完美地工作。下面是我如何在我的nuxt应用程序中使用vue slick corousel

//nuxt.config.js
插件：[
{src:'./plugins/vue slick carousel.js'}
],

插件js文件中的代码：

//vue-slick-carousel.js
从“Vue”导入Vue
从“vue slick转盘”导入VueSlick转盘
Vue.component（'VueSlickCarousel'，VueSlickCarousel）

最后在模板中：

{{cat.name}
从“vue slick转盘”导入VueSlick转盘
导入“vue slick carousel/dist/vue slick carousel.css”
//箭头和点的可选样式
导入“vue slick carousel/dist/vue slick carousel theme.css”
导出默认值{
名称：“CustomComponent”，
数据（）{
返回{
类别：[]
}
},
异步获取（）{
this.categories=等待获取(
'https://***************************/类别？限制=20'
).then（res=>res.json（））
},
组成部分：{
VueSlickCarousel
},
}

这是我在刷新“TypeError:无法读取未定义的属性'length'时遇到的错误”

每当我再次从客户端渲染页面时，错误就会消失。已尝试将容器绑定到

尝试使用条件

v-if=“滑动长度”

---

没用。如何解决此问题？

编辑：下面是对

$fetchState.pending

helper用法的说明

• 是一个非阻塞钩子，允许您在页面/组件加载时获取数据

  • asyncData（）

    被阻塞，但仅当您导航时，而不是在初始渲染时，这可能会很烦人
  • 您可以使用

    fetch（）

    和

    a中间件的组合进行阻塞导航

  • 使用是一种让用户在感觉应用正在加载时等待的好方法（Facebook-y）
• 您的模板实际上是同步的，不会等待您收集数据，它希望已经有了它

  VueSlickCarousel

  实际上正在等待您为其提供一组项目。但是在初始渲染时以及在获取任何数据之前，您只有

  categories:[]

  作为

  data（）中的设置

• $fetchState.pending

  是一个函数，它可以告诉我们

  fetch（）

  中的所有调用何时完成。因此，如果您将调用4个不同的API，那么只有在所有4个调用都完成时，它才会等于

  false

  。
  • 实际上，您也可以使用

    this.$fetchState.pending=true来手动设置它，但这是强制的，应该在正确理解后使用

• 通过编写
  ，我们基本上是说，在挂载这个组件之前，等待我所有的东西都进入

  fetch（）

  。这可以防止出现任何

  .length

  方法问题，因为只有在应用

  .length

  时，才会安装组件本身

下面是Nuxt生命周期的一个小图片，重点是

fetch（）

hook。

---

您不应该混合使用

async/wait

和

then

。尽量只使用其中一种（我推荐第一种）

async fetch（）{
const response=等待获取(
'https://***************************/类别？限制=20'
)
const fetchedCategories=await response.json（）
console.log（'categories'，fetchedCategories）
this.categories=fetchedCategories
},

另外，

：key=“index”

是一种不好的做法，因为

索引在
v-for
中是可变的。尝试改用API中的UUID

我很确定这些也不是必需的：


从“vue slick carousel”导入VueSlick carousel
组件：{VueSlickCarousel}，
如何获取
slik
？这一个在某个点上是未定义的，因此出现
length
错误。这更像是一个生命周期问题。当然，这个问题可以通过一些
slik？.length来解决，但如果能找到目前发生这种情况的原因，这将是一个更大的问题。谢谢。届时将小心不要使用，并一起等待。但旋转木马仍然不起作用。它显示“TypeError:无法读取未定义的属性'length'。我想知道是否有任何方法可以在SSR nuxt中使用vue slick转盘。正如他们在文件中所说，它应该在SSR中完美工作，但到目前为止，这与SSR无关。我没有尝试过这个特定的包，但看起来这仍然是一个数据没有在早期填充的问题。试试这个
。此外，控制台日志是否显示任何内容？谢谢！if=“！$fetchState.pending”我想实际起作用了！将进行更多的测试和试验，但仍然没有错误了。这很有帮助！你能解释一下这背后的逻辑吗？？如果你把这个作为答案，我也可以打勾。再次感谢！当然我一直在使用fetch hook在nuxt中获取数据，不知道fetch也可以用这种方式在slick carousel中最终使用，这只是一个如何/何时/何地获取数据的问题。光滑的旋转木马将完成它的工作，尽管如此，它只需要一个阵列。