VueJS スケジューリング関数の実行順序により問題が発生する-PHP中国語ネットワークQ&A

(API から取得した) お知らせのリストをページに表示しようとしています。私は Vuex ストアを使用しており、アナウンスというステータスを持っています。また、ユーザーがページを更新/入力するたびにこのリストが更新されるようにしたいと考えています。そこで、ライフサイクルフック、特に Mounted() を使用しました。クラブ ID をパラメーターとして受け取るディスパッチ関数があります。問題は、Vue コンポーネントのアナウンス配列にアクセスしようとすると、Vuex ストアのバージョンよりも 1 ステップ遅いことです。

次のコンテンツは Vue コンポーネント ClubDetails.vue

にあります。リーリー

これは私のストアですClubDetails.js

リーリー

print ステートメントの後の実行順序が予期したものと異なります。

私が期待する順序は次のとおりです: 内部データ -> 内部ディスパッチ -> 内部ミューテーション -> ディスパッチ後。

もう 1 つの問題は、ページを更新すると、mount() が再度呼び出され、配列が更新されて再び表示されると期待しているのですが、更新すると配列の内容がすべて消えてしまうことです。

全員に返信 (1)

P粉0256324372024-04-07 00:08:29 1棟

これは、this.$store.dispatch('ClubDetails/getpayments', this.club_id)がサーバーに応答しており、非同期であり、サーバーからアナウンスを取得するのに時間がかかるためです。そして、サーバーから応答を受信する前にconsole.log("Afterdispatch function")が実行されます。

これが、最初にpost-dispatch 関数が表示され、次に内部ディスパッチ関数が表示される理由です。

このようにディスパッチする前に待機してみてください。

これは Promise であり、await と then を同時に使用する必要がないため、axios.get メソッドを返す必要があります。 await を使用しなくなったので、getpaymentsから async を削除することもできます。