コンポーネントが詳細になるにつれて、複数のコンポーネントが状態を共有する状況に遭遇するでしょう。Vuex は確かにこの種の問題を解決できますが、公式の Vuex ドキュメントにあるように、アプリケーションが十分に大きくない場合は、面倒で冗長なコードを避けるために使用しない方がよいでしょう。今日は、vue.js 2.6 で新しく追加された Observable API を紹介します。この API を使用すると、いくつかの単純なコンポーネント間のデータ状態共有状況に対処できます。 ストアオブジェクトの作成まず、それぞれデータと処理メソッドを指すために使用されるストアとミューテーションを含む store.js を作成します。 //ストア.js 'vue' から Vue をインポートします。 export let store =Vue.observable({count:0,name:'李四'}); エクスポートlet変異={ setCount(カウント){ ストア.count=カウント; }, 名前を変更する(名前){ ストア.name=名前; } } ストアオブジェクトをさまざまなコンポーネントに適用する次に、コンポーネント内のオブジェクトを使用します //オブザーバブル.vue <テンプレート> <div> <h1>クロスコンポーネントデータ状態共有オブザーバブル</h1> <div> <トップ></トップ> <下></下> </div> </div> </テンプレート> <スクリプト> './components/top.vue' から top をインポートします。 './components/bottom.vue' から bottom をインポートします。 エクスポートデフォルト{ 名前: 'obserVable', コンポーネント: トップ、 底 } }; </スクリプト> <スタイルスコープ> </スタイル> //コンポーネントa <テンプレート> <div class="bk"> <span ><h1>コンポーネント</h1> {{ 数 }}--{{ 名前 }} > <button @click="setCount(count + 1)">現在のコンポーネントに +1 します</button> <button @click="setCount(count - 1)">現在のコンポーネント -1</button> </div> </テンプレート> <スクリプト> '@/store' から store, mutations をインポートします。 エクスポートデフォルト{ 計算: { カウント() { store.count を返します。 }, 名前() { ストア名を返します。 } }, メソッド: { setCount: 変異.setCount、 変更名: 変異.変更名 } }; </スクリプト> <スタイルスコープ> .bk { 背景: ライトピンク; } </スタイル> //コンポーネントb <テンプレート> <div class="bk"> <h1>b コンポーネント</h1> {{ 数 }}--{{ 名前 }} <button @click="setCount(count + 1)">現在の b コンポーネントに +1 </button> <button @click="setCount(count - 1)">現在の b コンポーネント -1</button> </div> </テンプレート> <スクリプト> '@/store' から store, mutations をインポートします。 エクスポートデフォルト{ 計算: { カウント() { store.count を返します。 }, 名前() { ストア名を返します。 } }, メソッド: { setCount: 変異.setCount、 変更名: 変異.変更名 } }; </スクリプト> <スタイルスコープ> .bk { 背景: ライトグリーン; } </スタイル> 表示効果 これで、Vue ローカル コンポーネント データ共有のための Vue.observable() の使用に関するこの記事は終了です。Vue.observable() データ共有に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: CentOS 6 ZLMediaKit のコンパイルとインストール分析
>>: MySQL 上級学習ノート (パート 3): MySQL 論理アーキテクチャの紹介、MySQL ストレージ エンジンの詳細な説明
目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...
目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...
今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...
目次1. ミューテックス1. ミューテックスの初期化2. ミューテックスロックの関連特性と分類3. ...
目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...
プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...
多くのウェブデザイナーは、ウェブページのレイアウトを設計する際に、インターフェースウェブページの幅に...
垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...
mysql の存在する例と存在しない例の詳細な説明テーブルA |列1 | 列1 | 列3 |テーブル...
この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...
<br />当サイトのオリジナルコンテンツですので、転載の際は出典を123WORDPRE...
私のプロジェクトの特定の機能ではサーバーが rabbitmq にメッセージを送信する必要があるため、...
コンテンツ タイプについて学ぶには、まずそれが何であるか、そして何に使用されるかを知る必要があります...
序文文字セットは、一連のシンボルとエンコード規則です。Oracle データベースでも MySQL デ...
目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...