Question

我创建了一个使用axios（+ vue-axios）将数据从JSON文件获取到Vuex存储的应用程序。我还将Vue-Router用于我的应用程序的不同视图。

在我的主要组件（App.vue）中显示<router-view>
我的视图组件是Slides.vue

当我是created()时是2。

created(): {
  this.$http.get('./static/data/slides.json')
    .then(({ data }) => {
      this.$store.state.slides = data;
    })
    .catch((error) => {
      console.log(error);
    });
},

在该组件（Slides.vue中具有Slide.vue组件，该组件获得:slides="slides"道具：
```
<Slide :slides="slides" />
```
我在Slide.vue的{{1}}内部：
```
<script>
```
在props: ['slides'], computed: { slideId() { return this.$store.state.activeSlide; }, slide() { return this.slides[this.slideId]; }, slideTitle() { return this.slide.title; }, },中，我使用<template>显示标题

当我尝试运行此命令时，我在{{ slideTitle }}中出错：

[Vue警告]：渲染错误：“ TypeError：this.slide未定义”

为什么会这样？

当我将Slide.vue更改为this.slide.title时，它似乎可以工作（但是显示不是我想要的JSON文件中的所有数据）

Answer 1

我认为问题与this.slideId到商店的created()调用被解决之前（或随时）未定义有关。这导致计算的属性slide为undefined-因为它解析为this.slides[undefined]。最后，计算出的属性slideTitle解析为undefined.title，从而引发错误。

如果我是对的，则可以通过如下修改slideTitle()计算属性来解决此问题：

slideTitle() { return this.slide && this.slide.title; }

因此，当您这样做时，created()钩子中存在问题：

this.$store.state.slides = data;

您正在直接操纵商店状态。 vuex禁止这样做，并且会导致各种错误。而是you should use a mutation修改存储状态。

为什么我的计算未定义

1 个答案: