VueJS スケジューリング関数の実行順序により問題が発生する

Question

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

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

にあります。 リーリー

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

リーリー

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

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

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

Answer 1

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

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

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

リーリー

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

リーリー