VUE 3でVUEXを必要としないかもしれません

Vuexは素晴らしい州管理ライブラリです.それは簡単で、Vueとよく統合されます.なぜ誰でもVEEXを残しますか?理由は、今後のVue 3リリースでは、基になる反応性システムを公開し、アプリケーションを構築する方法の新しい方法を紹介することができます.新しい反応性システムは集中的な状態管理に使用できるように強力です.

共有状態が必要ですか?
複数のコンポーネント間のデータフローが集中的な状態管理を必要とするほど難しくなる状況があります.これらの状況には、
同じデータを使用する複数のコンポーネント
データアクセスによる

マルチプルルーツ
コンポーネント

の深い入れ子
上記のケースのどれも本当でないならば、答えは簡単です.あなたはそれを必要としない.
しかし、あなたがこれらのケースの1つを持っているならば、どうですか?簡単な答えは、vuexを使用することです.これは、戦いのテストソリューションとまともな仕事です.
しかし、別の依存関係を追加したり、セットアップを過度に複雑にしたくない場合はどうですか?新しいVue 3バージョンは、一緒に組成APIとの組み込みメソッドを使用して、これらの問題を解決することができます.

新しい解決策
共有状態は2つの基準に適合しなければなりません:

反応性:状態が変化するとき、それらを使用しているコンポーネントは

も更新しなければなりません

アベイラビリティ:状態は、コンポーネント

のいずれかでアクセスすることができる

反応性
Vue 3は多くの機能を通してその反応性システムを公開する.reactive関数で代替変数を作成できます(代替案はref関数です).

import { reactive } from 'vue';

export const state = reactive({ counter: 0 });

reactive関数から返されるオブジェクトは、そのプロパティの変更を追跡できるProxyオブジェクトです.コンポーネントのテンプレートで使用する場合は、リアクティブバリューが変化するたびにコンポーネントが再表示されます.

<template>
  <div>{{ state.counter }}</div>
  <button type="button" @click="state.counter++">Increment</button>
</template>

<script>
  import { reactive } from 'vue';

  export default {
    setup() {
      const state = reactive({ counter: 0 });
      return { state };
    }
  };
</script>

有効
上の例は単一のコンポーネントに対して優れていますが、他のコンポーネントは状態にアクセスできません.これを克服するには、provideとinjectのメソッドを使用してVue 3アプリケーション内で任意の値を利用できます.

import { reactive, provide, inject } from 'vue';

export const stateSymbol = Symbol('state');
export const createState = () => reactive({ counter: 0 });

export const useState = () => inject(stateSymbol);
export const provideState = () => provide(
  stateSymbol, 
  createState()
);

Symbolをキーとしてprovideメソッドに値を渡すとき、その値はinjectメソッドを通してどんな子要素でも利用可能になります.キーは、値を提供して、取得するとき、同じSymbol名を使用しています.

このように、最上位のコンポーネントに値を指定すると、すべてのコンポーネントで使用できます.また、メインアプリケーションインスタンスでprovideを呼び出すこともできます.

import { createApp, reactive } from 'vue';
import App from './App.vue';
import { stateSymbol, createState } from './store';

const app = createApp(App);
app.provide(stateSymbol, createState());
app.mount('#app');

<script>
  import { useState } from './state';

  export default {
    setup() {
      return { state: useState() };
    }
  };
</script>

堅牢にする
上記の解決策は動作しますが、欠点があります.状態を直接変更でき、制限はない.
あなたの状態をreadonly機能でそれを包むことによって保護することができます.これは、変更を妨げるProxyオブジェクトの渡された変数をカバーします(あなたがそれを試みるとき、警告を発します).突然変異は、書き込み可能なストアにアクセスできる別の関数で処理できます.

import { reactive, readonly } from 'vue';

export const createStore = () => {
  const state = reactive({ counter: 0 });
  const increment = () => state.counter++;

  return { increment, state: readonly(state) };
}

外部世界は読み取り専用の状態にのみアクセスでき、エクスポートされた関数だけが書き込み可能な状態を変更することができます.
不必要な変更から状態を保護することによって、新規解は、比較的VUVに近い.

概要
VUE 3の反応性システムと依存性注入メカニズムを使用することによって、我々はより小さなアプリケーションでVUEXを取り替えることができる地方の州から集中した州管理から行きました.
ReadOnlyで、テンプレートの変更に反応する状態オブジェクトがあります.状態は、VUEXの動作/突然変異のような特定の方法によってのみ変更することができます.24579142関数で追加のゲッターを定義できます.
Vuexはモジュール処理のような機能を持っていますが、時々必要はありません.
あなたがVue 3を見て、この州管理アプローチを試してみたいならば、私のVue 3 Playgroundを見てください.

blacksonic / vue-3-playground
すべての新機能を満載Vue