Vue ストレージ内の配列がコンポーネントで (時間内に) 使用できません

Question

私のアプリケーションでは、vuex ストアにゲーム カードのセットを保存しています。

プレーヤーがゲーム ピンを入力すると、コードがそれをチェックして、そのピンのゲーム カードを取得してストレージに保存し、メモリ コンポーネントを開きます。

リーリー

fetchGameCrds は vuex オペレーションです:

リーリー

メモリ コンポーネントでは、カードが取得され、ゲームが始まります。 残念ながらゲームカードを店から受け取るのは間に合いませんでした。

ブラウザの開発者ペインでは、カードがストアにあることがわかります。

Memoryscript はいくつかのデバッグ メッセージで始まります:

リーリー

コンソールの出力は次のようになります:

リーリー

この問題を解決する方法を知っている人はいますか?

ゲーム カードを毎回バックエンドから取得するのではなく、他のコンポーネントでも使用したいので、コンポーネント自体でカードを取得したくありません。

Answer 1

コンポーネントのマウント時に gameCards 配列が設定されていない場合は、gameCards が実際に使用できる状態になったときに Observers を使用して関数を実行できます

リーリー

ウォッチャーは新しい配列値が割り当てられると常に実行されますが、コード例が示すように、渡された古い配列値と新しい配列値に基づくロジックを使用して、ウォッチャーが実際に何かを行うかどうかを制御できます。

デフォルトでは、オブザーバーは監視対象の配列の完全な再割り当てでのみ実行されますが、必要に応じて ディープ オブザーバーを使用できます。