Vue ローカルコンポーネントデータ共有 Vue.observable() の使用

Vue ローカルコンポーネントデータ共有 Vue.observable() の使用

コンポーネントが詳細になるにつれて、複数のコンポーネントが状態を共有する状況に遭遇するでしょう。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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueのライフサイクルについて学びましょう
  • Vue3ライフサイクルフック機能の詳しい説明
  • Vueのライフサイクルについての簡単な説明
  • Vueコンポーネント間のデータ共有の詳細な説明
  • Vueは2つのコンポーネント間のデータ共有と変更操作を実装します
  • Vueのライフサイクルとデータ共有の詳細な説明

<<:  CentOS 6 ZLMediaKit のコンパイルとインストール分析

>>:  MySQL 上級学習ノート (パート 3): MySQL 論理アーキテクチャの紹介、MySQL ストレージ エンジンの詳細な説明

推薦する

このポイントのJavaScriptの基本

目次これ方法オブジェクト内これを隠した厳密モード要約するJavaScript の this も不思議...

Docker で Node プロジェクトをビルドしてデプロイする方法

目次DockerとはクライアントサイドDocker基本的なDocker操作画像名画像をプルするその他...

Nginx proxy_redirect の使用方法の詳細な説明

今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...

Linux C++ マルチスレッド同期の非常に詳細な説明

目次1. ミューテックス1. ミューテックスの初期化2. ミューテックスロックの関連特性と分類3. ...

Vueのドラッグ可能なコンポーネントであるVue Smooth DnDの使用方法の詳細な説明

目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...

優れたウェブワイヤーフレーム設計・制作ツール13選を紹介

プロジェクトの作業を開始するときは、ワイヤーフレームを使用してアイデアをスケッチすることが重要です。...

Web ページは何ピクセルで設計すればよいでしょうか?

多くのウェブデザイナーは、ウェブページのレイアウトを設計する際に、インターフェースウェブページの幅に...

HTML テーブルタグチュートリアル (25): 垂直配置属性 VALIGN

垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...

mysql の存在する例と存在しない例の詳細な説明

mysql の存在する例と存在しない例の詳細な説明テーブルA |列1 | 列1 | 列3 |テーブル...

vue-tableは追加と削除を実装します

この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...

XHTML チュートリアル: 初心者のための XHTML の基礎

<br />当サイトのオリジナルコンテンツですので、転載の際は出典を123WORDPRE...

LinuxサーバーでRabbitMQ管理ページにアクセスできない問題を解決

私のプロジェクトの特定の機能ではサーバーが rabbitmq にメッセージを送信する必要があるため、...

コンテンツタイプの説明、つまりHTTPリクエストヘッダーのタイプ

コンテンツ タイプについて学ぶには、まずそれが何であるか、そして何に使用されるかを知る必要があります...

MySQL 文字セットの文字化けとその解決方法

序文文字セットは、一連のシンボルとエンコード規則です。Oracle データベースでも MySQL デ...

Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明

目次1. レンダリング2. データをバインドし、ツリーテーブルにラベルを追加する3. すべてのコード...