ヴュー/ルーター：どのように私は正しくページコンテンツをレンダリングする前に、データをフェッチしますか？

クモ：

私はVueのルータとAxiosでNuxtを使用しています。私はVueのルーターと呼ばれるこの素晴らしい機能がある参照ナビゲーションガードを。

残念ながら、以下の例では、私のbeforeRouteEnter()関数が呼び出されますが、私のマニュアルの前に出るとスイッチページに思えるnext()方法がで呼ばれていますfetchPageData(next)。

ここでは、正しいパターンは何ですか？

export default {
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.fetchPageData(next);
        });
    },
    methods: {
        async fetchPageData(next) {
            const result = await this.$axios.$get('/api/v2/inventory/3906?apiKey=f54761e0-673e-4baf-86c1-0b85a6c8c118');
            this.$store.commit('property/setProperty', result[0]);
            next();
        }
    }
}

私は私の最初の呼び出しをすると仮定しnext(vm => {})、私は（ほとんどの場合、誤って）次のコールバックしようとする前に）（ページ変更で、その結果、実行を継続できるように、非同期で実行されています。

ミハル・左：

あなたは、呼び出し、正しいnext()二度目は間違っています。あなたの最初の呼び出しnext()に行く」ルーターに伝え、あなたは、活性成分を変更することに進むことができます（レンダリング/マウント/作成）とコンポーネントが作成されたときに、（引数として渡された私のコールバックを呼び出しますnext()）

あなたにはガイダンスに従うことができ、データのフェッチ-ナビゲーションの前にフェッチドキュメントすなわち。最初の通話データをフェッチnext()した後、それは、コンポーネント自体のロジックをフェッチ抽出することが必要です。

一般的に私は、第一のレンダリングには、ここではなく、すべての非同期の決意を呼び出したときに、後に来ているデータを想定した方法で、すべてのコンポーネントを書き込むことが容易に見つけます...

UPDATEオプションを取得Nuxt非同期データ

あなたがNuxt.jsを使用しているとして、あなたは非同期データを使用する方法を他のいくつかのオプションがあります。

nuxtServerInit -サーバー側からのデータをクライアント側Vuexストアを満たすのに便利
方法を取得 -取得方法は、ページをレンダリングする前に店を埋めるために使用されます。それはようなものだasyncData、それはコンポーネントデータを設定しないと、あなたが店にデータを置くことを可能にする以外方法。以下からの約束を返すfetchことがコンポーネントを描画する前に、方法は、解決するための約束のためにNuxt待機を行います...
asyncDataの方法は、データをフェッチし、コンポーネントの内側にそれを置くために使用することができますdata。以下からの約束を返すasyncDataことがコンポーネントを描画する前に、方法は、解決するための約束のためにNuxt待機を行います...

export default {
  async fetch({store, $axios}) {
    const result = await $axios.$get('/api/v2/inventory/3906');
    store.commit('property/setProperty', result[0]);
  }
}

ヴュー/ルーター：どのように私は正しくページコンテンツをレンダリングする前に、データをフェッチしますか？

おすすめ