コンポーネントが詳細になるにつれて、複数のコンポーネントが状態を共有する状況に遭遇するでしょう。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 ストレージ エンジンの詳細な説明
ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...
今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...
復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...
Dockerのインストール公式インストールスクリプトを使用して最新バージョンのDockerをインスト...
1. HTML マークアップ言語とは何ですか? HTML は、Web ページの情報を表すマークアッ...
1. ビューポートの概要モバイル ブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリ...
フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...
背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...
1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...
おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...
閉鎖による問題を回避するためのletについてオブジェクト指向の考え方を使用して、購入者情報の削除機能...
COALESCE は、各パラメータ式 (expression_1、expression_2、...、...
さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...
概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...
導入:現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロ...