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 ストレージ エンジンの詳細な説明

推薦する

Link と @import の違いを詳しく見る

ページで CSS を使用する主な方法は、スタイル属性値をインラインで追加する方法、ページ ヘッダーで...

iframeノードの初期化の問題に関する議論

今日、ふとリッチテキストエディタの制作原理を見直してみようと思いました。それで、彼は何も言わずにそれ...

Linux でテキストから改行文字を削除する方法

復帰文字 ( Ctrl+M ) に不安を感じても心配しないでください。それらを排除する簡単な方法がい...

Docker ビルド PHP 環境チュートリアル詳細説明

Dockerのインストール公式インストールスクリプトを使用して最新バージョンのDockerをインスト...

HTML 学習ノート - HTML 構文の詳細な説明 (必読)

1. HTML マークアップ言語とは何ですか? HTML は、Web ページの情報を表すマークアッ...

ビューポートの基本原理と詳細な使用方法

1. ビューポートの概要モバイル ブラウザは通常、画面よりも幅の広い仮想ウィンドウにページをレンダリ...

DIVマスクを使用して、マウスでチェックボックスを直接チェックすることが無効である問題を解決します

フロントエンドの開発過程で、チェックボックスが必要な状況が発生しました。ユーザー操作の利便性を考慮し...

数ステップでサイバーパンク2077風の視覚効果を実現するCSS

背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...

React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...

Navicat for MySQL 11 登録コード\アクティベーションコードの概要

おすすめの読み物: Navicat12.1シリーズのクラッキングとアクティベーションのチュートリアル...

JavaScript のクロージャによって発生する問題を回避する

閉鎖による問題を回避するためのletについてオブジェクト指向の考え方を使用して、購入者情報の削除機能...

MySql COALESCE 関数の使用コード例

COALESCE は、各パラメータ式 (expression_1、expression_2、...、...

MySQL データ ウェアハウスを保護するための 5 つのヒント

さまざまなソースからデータを集約することで、中央倉庫を作成できます。データ ウェアハウスは、ビジネス...

Node.js の fs モジュールと Path モジュールのメソッドの詳細な説明

概要:ファイルシステム モジュールは、標準の POSIX ファイル I/O 操作セットをラップしたシ...

JavaScript を使用してページに動的な検証コードを実装する例

導入:現在、プログラム攻撃を防ぐために、ユーザーがログインまたは登録するときに多くの動的検証テクノロ...