在 Vue 实例外的全局 const 中获取 axios 响应数据答案

【问题标题】：Get axios response data in a global const outside Vue instance在 Vue 实例外的全局 const 中获取 axios 响应数据
【发布时间】：2019-05-07 21:58:25
【问题描述】：

我从 mount() webhook 中的 REST api 的 axios 调用中得到了很好的响应，我知道如何正确地做到这一点：

const vm = new Vue({
    el: '#flashcard-app',
    data: {
        card : cards[index],
        cards: cards,
    },

    mounted() {
        axios.get(url).then(response => {
            this.cards = response.data
        });
    },

当我尝试像这样简单地输出我的卡片集合时：{{cards}} 它显示得很好，以一种很好的 JSON 正确方式。

但是

当我尝试以如下特定方式显示此集合时，它在控制台中崩溃并说它是 undefiend

<li v-on:click="toggleCard(card)" id="list">
        <transition name="flip">
            <p class="card" v-if="!card.flipped" key="question">
                {{card.question}}
            </p>
            <p class="card" v-else key="answer">
                {{card.answer}}
            </p>
        </transition>
    </li>
</ul>


<div  v-if="card.flipped">
    <button class="button-card btn btn-success" id="remember" v-on:click="next()">Remember</button>
    <button class="button-card btn btn-danger" id="don't" v-on:click="next()">Don't Remember</button>
    <button class="button-card btn btn-warning" id="!sure" v-on:click="next()">Not Sure</button>
</div>

问题是，当我尝试用硬编码的 const 集合做同样的事情时，它工作得很好！

我认为它以某种方式与生命周期有关，但我已经尝试过 beforeCreate() 和 created() 并且它似乎根本不起作用（

我能否以某种方式在 vue 组件之外获得对 const 的 axios 响应？

【问题讨论】：

是否定义了card？你从哪里得到你的index？
@ssc-hrep3, index 是一个外部变量，定义如下： let index = 0;在同一个文件中。我不确定我的辩护是否正确，你能提供一些变体吗？
它应该像这样工作，但最好的做法是在 Vue 组件的数据部分中有一个索引变量。然后可以从cards 和index 派生当前选定的项目，并带有computed property。但是，代码可能不起作用的原因是它的执行顺序：您在远程加载卡片后在回调中设置cards。但是，card 的值是在组件初始化期间设置的。您需要重构它（使用计算属性）。您还可以访问数据中没有 this 的卡片
能否给我一个重构代码的例子？

标签： javascript vue.js axios constants reactive

【解决方案1】：

您收到的“卡片未定义”错误不是来自您的 HTML，而是来自此 sn-p：

data: {
    card : cards[index],
    cards: cards,
}

此时的卡片是什么？除非你在 Vue 实例之外有一个名为 cards 的全局变量，否则这两个赋值都会失败。

最佳做法是先将cards 初始化为空列表，然后将card 初始化为空：

data: {
    card : null,
    cards: [],
}

然后您可以实现created() 挂钩，发出请求并填充卡片列表。

如果您总是想将card 设置为列表中的第一张卡片，您可以使用计算属性观察cards 变量的变化。

created() {
    axios.get(url).then(response => {
        this.cards = response.data
    });
}

【讨论】：

vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'flipped' of undefined" 仍然认为卡片未定义
@dimlucas 你的意思可能是created() 或mounted()。 vuejs.org/v2/guide/instance.html
我试过你的方法，现在它并没有完全崩溃，但是加载了信息，我可以说它有帮助，但我还有一件事想问如果我想要怎么办向此卡片集合中的所有对象添加具有相同名称的布尔字段？当我完成 axios 时，我在 created() 中尝试了 this.cards.forEach(function (e) { e.flipped = false; })，但它没有用
在created()：this.cards = response.data.map(d => { d.flipped = false; return d })内试试这个

【解决方案2】：

我的代码作品看看它。我所做的是安装 parcel，它是一个捆绑器，可以将所有 javascript 文件捆绑到一个文件中，这样你就可以导入你的包。

// HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <section id="app">
      <h1>{{ message }}</h1>
      <section id="posts">
        <ul>
          <li v-for="post in posts">
            {{ post.title }}
          </li>
        </ul>
      </section>
    </section>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="./index.js"></script>
</html>

// js

import axios from 'axios';

new Vue({
  el: '#app',
  data: {
    message: 'hello world',
    posts: [],
  },
  created() {
    this.message = 'post app';
    const url = 'https://jsonplaceholder.typicode.com/posts';
    axios.get(url).then(data => {
      this.posts = data.data;
    });
  },
});

包裹

https://parceljs.org/

你需要一个 package.json ，用 npm init --y 安装它

这是一种不同的方法，但它可以工作。

【讨论】：

我试过你的代码，它似乎没有任何区别，不幸的是（仍然写道'cards'没有定义看起来它在编译html时没有定义，虽然created（）根据您的文档链接，钩子在它之前（任何想法为什么它与硬编码的 const 变量一起使用但不适用于 axios 响应？
您可以在在线编辑器中发布您的代码吗？这将有很大帮助；）谢谢！这样我就可以看到控制台日志发生在哪里。
恐怕我可以重新创建除 axios 获取请求之外的所有内容，因为它来自我在本地启动的 spring 应用程序，所以我真的不知道重新创建 axios 请求的其他方法。不幸的是，该代码适用于硬编码值（
我编辑了我的代码，你可以参考一些例子，让我知道它是否有意义！