11

试用 VueJS 2.0 RC，并使用 fetch API 为某些组件加载一些数据。这是一个模拟示例：

const Component = {
  template: '#comp',
  name: "some-component",
  data: function () {
    return {
      basic: data.subset,
      records: function () {
        return fetch('/datasource/api', {
          method: 'get'
        }).then(function (response) {
          return response.json();
        }).then(function (response) {
          if (response.status == "success") {
            return response.payload;
          } else {
            console.error(response.message);
          }
        }).catch(function (err) {
          console.error(err);
        });
      }
    }
  }
};

该data对象是一个全局应用程序状态，在应用程序初始化之前定义，并且组件中只需要它的一个子集，因此是该部分。组件数据的主要集来自我试图调用的另一个端点。但是，该data属性需要一个对象，并且它正在返回一个 Promise，它不能在模板中的循环上下文中真正使用以进行渲染等（例如v-for="record in records"）

我会以错误的方式解决这个问题吗？完全获取数据records属性后，更新数据属性的方法是什么？有没有办法强制代码停止，直到承诺解决（有效地使其同步）？无论如何，如果没有数据，该组件将毫无用处，因此无论如何都要等待一段时间才能使用它。

在不使用 vue-async 或 vue-resource 等插件的情况下异步填充组件数据字段的正确方法是什么？

（我知道我可以使用非承诺 ajax 调用的 XHR/jQuery 方法来做到这一点，但我想学习如何使用 fetch 来做到这一点）

更新：我尝试定义一个创建的钩子和一个加载数据的方法，就像这样但没有骰子 - 在我自己的实验中，记录属性一旦加载就无法更新。即使数据已成功获取（成功登录到控制台），它也不会改变。

使用 vue-router 和我正在处理的组件在单击链接时触发可能与我有关，而不是作为常规的 Vue 组件。进一步调查...

更新#2：如果我继续调查上面的 jsfiddle 方法并记录this.records到response.payload控制台，它会显示正在填充的记录对象。但是，这似乎不会触发模板或组件本身的更改 - 使用 Vue 开发工具检查，records 属性仍然是一个空数组。事实上，如果我在logstuff调用它的模板中添加一个方法和一个按钮，然后让这个方法登录this.records到控制台，它会记录一个带有空数组的观察者：

在此处输入图像描述

现在我想知道为什么组件的 data 属性即使在显式设置为另一个值之后也不会更新。尝试设置一个$route触发该reload方法的观察者，但没有骰子 - 该路由的每个后续加载确实重新发出提取，并且控制台记录this.records为填充（从提取中），但“真实”this.records仍然是一个空数组.

4

1 回答 1

5

解决方案是 jsfiddle 方法，但有所不同。这部分：

reload: function () {
      fetch('/data/api', {
        method: 'get'
      }).then(function (response) {
        return response.json();
      }).then(function (response) {
        if (response.status == "success") {
          this.records = response.payload;
        } else {
          console.error(response.message);
        }
      }).catch(function (err) {
        console.error(err);
      });
    }

.bind(this)在获取后设置值的部分中需要 a this.records，如下所示：

reload: function () {
      fetch('/data/api', {
        method: 'get'
      }).then(function (response) {
        return response.json();
      }).then(function (response) {
        if (response.status == "success") {
          this.records = response.payload;
        } else {
          console.error(response.message);
        }
      }.bind(this)).catch(function (err) {
        console.error(err);
      });
    }

这篇文章让我点击了它。

经验教训：在现代 JS 中，始终牢记范围。

于 2016-08-29T10:45:26.227 回答