vue.js - 为什么我的计算未定义

Question

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

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

3. 2.created()我什么时候做

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

4. 在那个组件中 ( Slides.vue) 有Slide.vue组件获得:slides="slides"道具：

   <Slide :slides="slides" />
   

5. 在里面Slide.vue我有<script>：

   props: ['slides'],
   computed: {
     slideId() { return this.$store.state.activeSlide; },
     slide() { return this.slides[this.slideId]; },
     slideTitle() { return this.slide.title; },
   },
   

6. 在<template>我{{ slideTitle }}用来显示标题

当我尝试运行它时，出现以下错误Slide.vue：

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

为什么会这样？

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

标签： vue.jsaxiosvue-routervuex

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 禁止的，会导致各种错误。相反，您应该使用突变来修改存储状态。