問題タブ [svelte-store]

最小限の作業例は次のとおりです。

レプリカ: https://svelte.dev/repl/ed0fb480159849458c2878d2210e9a40

コード：

App.svelte:

Child.svelte:

store.js:

問題: Svelte Store 内で Array.forEach を使用してループすると、値が更新されます (確実にコンソールに記録されます) が、動的バインディングは機能せず、変更は DOM で表示されません (ただし、値はストアで変更されます)。クラシック ループは問題なく動作します。したがって、 forEach を使用した後は何も表示されませんが、従来のループを使用すると、DOM が現在の (適切な) 値に更新されます。

だから、私はもちろん古典的なループに固執するかもしれませんが、ここで何が起こっているのか、そしてその理由を理解したいと思います:)

コメント/ヒントをいただければ幸いです。

基本的な質問: ストアの $ 構文は非コンポーネント JavaScript ファイルに適用できますか?

ドキュメントは次のように述べています。

ストアへの参照があるときはいつでも、 $ 文字をプレフィックスとして付けることで、コンポーネント内のその値にアクセスできます。

ただし、この公式の例では、コンポーネントではない派生ストアで $ 構文を使用しているようです。

これはカスタム ストアの特殊なケースですか? それとも、コンポーネントにインポートされるため可能ですか?

オブジェクト内の配列もストアとして使用できるストアとしてオブジェクトを作成したいと考えています。各配列を更新 (サブスクライブ) する必要があり、オブジェクトもローカル ストレージに更新する必要があります。

これがオブジェクトの構造です

これまでのコードは次のとおりです。

アプリ全体でuserExpensesとuserOptionsをストアとして使用できるようにしたいと考えています。これらの配列が更新されると、マスターuserInputsオブジェクトで更新する必要があり、これを localStorage にプッシュする必要があります。

ありがとうございました