問題タブ [vuex]

私はこのバインドされたスタイルを持っています:

この計算されたプロパティから:

this.errorsVuex から、この計算されたプロパティを参照します。

エラーは、 を使用して配列に追加されarray.pushます。1 つのエラーが追加または削除された場合、スタイル バインディングは正常に機能しますが、最初のページの読み込み時に、異なる非同期タスクの失敗 (http 要求) によって 2 つ以上のエラーが立て続けに追加される可能性があります。その場合、私の errHeight() 計算プロパティ1 エラーの高さのみを返します。

編集：

高さの計算を遅延のあるウォッチャーに移動すると、遅延が高さに影響を与える非同期関数よりも長い限り、機能します。setTimeout(this.calcHeight, 1000);本当に満足のいく解決策ではありません。

Vuex アプリケーションのイベントを管理するストアを設計しようとしています。これまでのところ、私は以下を持っています。

クリックするとストア内のデータの値が変わるはずのリスト項目をいくつか用意します。ルート コンポーネントAppとメニュー バーナビゲーションの設計は次のとおりです (最終的にアクションがたくさんあるので、それらをファイルactions.jsに集めました)。

最初のリスト項目をクリックすると、コンソールに出力が表示されます。ただし、2 番目のものをクリックしても何も起こらないので、イベントがまったくディスパッチされていないと確信しています。ページがレンダリングされているときに、次のエラーも表示されます。

プロパティまたはメソッド「updateData」はインスタンスで定義されていませんが、レンダリング中に参照されます。data オプションでリアクティブ データ プロパティを宣言してください。

私は Vuex を初めて使用するので、推測にすぎません。updateDataアクションへの参照を、 stateおよびMutationと一緒にストアに入れる必要がありますか? それ、どうやったら出来るの？エラーメッセージが話している「データオプション」はどこにありますか? それは私のコンポーネントの状態ではなく、プロパティですか?

質問の構成に不満があります。改善を提案することをお勧めします。また、無知（迷惑につながる無知）のために、問題の診断に欠陥がある可能性があることに注意してください。申し訳ありません。

この回答では、使用することが提案されていますが、未定義this.$store.xxxであるため、私のコードでは失敗します。thisコードの作成者 (つまり私) が愚かなことをしているのではないかと強く疑っているので、私のコンポーネント レイアウトの回路図を示します。

これが意図する方法は、2 つのコンポーネントを作成するランディング ページindex.jsを用意することです。1 つはアプリケーションのビジュアル用で、もう 1 つは情報の保存用です。ビジュアルアプリは、ナビゲーション バー (および後でレンダリング領域) で構成されます。navbar は、テーブル、リストなどを表示するさまざまな *.vue ファイルをレンダリングするストア (および表示領域) にコマンドをディスパッチします。

では、なぜthis is undefinedというテキストが表示されるのでしょうか? 私の構造は完全に欠陥がありますか、それともあちこちで細部が欠けているだけですか?

index.js

store.js

app.vue

ナビゲーション.vue

アクション.js

私は Vue を学んでいますが、多かれ少なかれどこにでも次の構文があることに気付きました。

this.$store.state.donkeyいつも書き出すのは面倒で、読みやすさも低下します。私はそれを最適とは言えない方法で行っていることを感じています。店舗の状態はどのように参照すればよいですか？

v-model で v-for を使用する必要があります。ドキュメントを読みましたが、ミューテーション ハンドラの外部でミューテーションを実行せずに v-for で使用する方法の例はありません。

プロパティを直接変更せずに v-for 内で v-model を使用するにはどうすればよいですか?

私はこのような設定をしています。要素がクリックされ、認識される特定の文字列を使用してメソッドが呼び出されます。もちろん、冗長な名前を維持する必要がないように、ID を提供することをお勧めします。

私がgooglearchingに行ったとき、使用されている構文がv-on="click: clickaroo"であり、 docsに示されているものではない、つまりv-on:click="clickaoo"であることがあちこちで見られました。前者は、正しい値を取得することは言うまでもなく、まったく機能していないようです。

また、大きなものは何も見つかりませんでした。今、問題を解決する方法がわかりません。私のようにVueでパラメータを提供するのは適切な方法ですか?

次のレンダリング（計算された小道具）を持つコンポーネントがあります。それは機能し、テキストは blopp の場合と同じように表示されますが、blippの場合は何も表示されません。最終バージョンでは、ストアの状態から取得した文字列のリストを生成し、blippとして機能させたいと考えています。

次のテンプレートに基づいてレンダリングされます。

ストアの実装は、 getterをオープン フォーラムに持ち込む次のようになります。

2 番目のコンポーネントにはまったく価値がなく、原因を探す場所がわかりません。

私はおそらく間違って設定しましたが、多くの可動部分があり、無知な私にとっては診断が少し難しいです. コンソールで以下を実行しようとすると、

temp.$store.getters

このようなゲッターをリストするオブジェクトを取得します。

その情報をどうするかわからない...関数のように見えますが、呼び出そうとすると未定義と表示されます。

Vue のインスタンスを HTML 要素にアタッチするには、2 つの方法があります。

1. プロパティ参照で、el:"#rooty"
2. メソッド呼び出しで、$mount("#rooty")

私はそれらの間で決めることができません。それらは正確に同等ですか？どちらが新しいか、または古いものである場合、どちらが推奨されますか? 他に違いはありますか？その場合はどうなりますか？

プロパティ参照による。

メソッド呼び出しで。