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 をよろしくお願いいたします。

以下もご興味があるかもしれません: