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 などのプラグインを使用せずに、コンポーネントのデータ フィールドを非同期に設定する正しい方法は何ですか?

(これを行うには、promise 以外の ajax 呼び出しの XHR/jQuery メソッドを使用できることは知っていますが、フェッチを使用してそれを行う方法を学びたいと思います)

更新:作成されたフックと、このようにデータをロードするメソッドを定義しようとしましたが、サイコロはありません-私自身の実験では、レコードプロパティはロードされると更新に失敗します. データが正常にフェッチされても (コンソールに正常にログインしても)、変更されません。

vue-router と、通常の Vue コンポーネントではなく、リンクがクリックされたときにトリガーするコンポーネントを使用して、私と関係がある可能性があります。さらに調査中...

更新 #2: 上記の jsfiddle アプローチの調査を続けてコンソールに記録するthis.recordsとresponse.payload、レコード オブジェクトが入力されていることが示されます。ただし、これはテンプレートまたはコンポーネント自体の変更をトリガーするようには見えません。Vue 開発ツールで調べると、records プロパティは空の配列のままです。実際、メソッドlogstuffとそれを呼び出すボタンをテンプレートに追加し、このメソッドthis.recordsをコンソールにログインさせると、空の配列でオブザーバーがログに記録されます。

ここに画像の説明を入力

コンポーネントの data プロパティが、明示的に別の値に設定された後でも更新されないのはなぜだろうか。$routeメソッドをトリガーするためのウォッチャーを設定しようとしましたreloadが、サイコロはありません-そのルートの後続のすべてのロードは実際にフェッチを再発行し、コンソールはthis.records（フェッチ内から）入力されたものとしてログに記録しますが、「実際の」this.recordsは空の配列のままです.

4

1 に答える 1