Vue3の状態管理の使用方法の詳細な説明

背景

Vue3 の段階的な適用に伴い、状態管理の需要が高まっています。当初、状態管理は Vuex4 に基づいていましたが、Vuex4 でもいくつかの問題が明らかになりました。個人的な観点から言えば、Vuex4 は移行期の製品に似ており、TypeScript のサポートは完全ではありません。 TypeScript を使用してコンポーネントを記述する場合は、型を正しく推論するために特定の手順に従う必要があり、モジュールの使用には適していません。 Vuex のコアコントリビューターである Kia King 氏も、Vuex5 はすでに計画されており、完全な TypeScript サポートを提供できると述べています。では、Vuex5 がリリースされる前、または Vuex が直接「放棄」された場合、他の状態管理ソリューションはあるのでしょうか?

提供/注入

Provide と inject は Vue3 の新機能ではなく、Vue2 にすでに存在していました。ドキュメントには、provide バインディングと inject バインディングはリアクティブではないと記載されています。ただし、リスニング可能なオブジェクトを渡すと、そのオブジェクトのプロパティは引き続きリスニング可能になります。

Vue3 では、Computed と watch をベースにしたレスポンシブ API ref と reactive が追加され、provide と inject のアプリケーションがより便利になりました。Composition API のアイデアと組み合わせることで、状態管理の簡易版を実装できるでしょうか?

共有状態の抽出

// src/context/calculator.ts

'vue' から { ref、inject、provide、readonly } をインポートします。

タイプ計算機 = {
    count: 数;
    増加: () => void;
    updateCount: (num: 数値) => void;
};

// キーと一意のトークンを提供する const CalculatorSymbol = Symbol();

//プロバイダーエクスポートconst calculatorProvide = () => {
  	//数値 const count = ref<number>(1);
  	//増加メソッド const increase = () => {
        count.value++;
    };
   //更新メソッド const updateCount = (num: number) => {
        count.value = 数値;
    };
  	//提供される共有状態オブジェクト constdepends = {
        count: readonly(count), // 読み取り専用ステータス、increase メソッドで変更、
        更新回数
    };
  	//provide API を使用して状態オブジェクトを実装します provide(CalculatorSymbol,depends);
  	// ピアが呼び出せるようにステータス オブジェクトを返します return depends;
};

// 注入メソッド export const calculatorInject = () => {
    // 注入 API を使用して状態を注入します。const calculatorContext = inject<Calculator>(CalculatorSymbol);
  	//共有せずに注入のエラーをチェックします if (!calculatorContext) {
        throw new Error('Inject は Provide の後に使用する必要があります');
    }
  	// 注入された貢献ステータスを返します return calculatorContext;
};

データを提供する

Vuex のグローバル共有と比較して、Provide/Inject はグローバルまたはローカル共有を実現できます。

グローバル共有では、main.ts にグローバル状態を挿入できます。

// ソース/main.ts

'vue' から createApp, h } をインポートします。
'@/App.vue' から App をインポートします。
'@/context/calculator' から calculatorProvide をインポートします。

// Vueインスタンスを作成する const app = createApp({
    設定（） {
        計算機を提供します();
        戻り値 () => h(App);
    }
});

// インスタンスをマウントします app.mount('#app');

ローカルでのみ共有したい場合は、親コンポーネントに状態を注入することができます。

// src/views/parent.vue

「vue」からdefineComponentをインポートします。
'@/context/calculator' から calculatorProvide をインポートします。

エクスポートデフォルトdefineComponent({
  名前: "親",
  設定（） {
    //共有データ calculatorProvide();
  }
});

データの挿入

サブコンポーネントは状態を介して状態を注入、使用、または変更できる

// src/views/child.vue

「vue」からdefineComponentをインポートします。
'@/context/calculator' から calculatorInject をインポートします。

エクスポートデフォルトdefineComponent({
  名前:「子供」、
  設定（） {
    //データを挿入 const { count, increase, updateCount } = calculatorInject();
  }
});

まとめ

実際、依存性注入 (Provide/Inject) は、次の点を除いて「長距離 props」と考えることができます。

親コンポーネントは、提供されたプロパティをどの子コンポーネントが使用するかを知る必要はありません。
サブコンポーネントは、注入されたプロパティがどこから来たのかを知る必要はありません。

Vue3 では依存性注入がより柔軟かつ便利になり、小さな状態管理をシミュレートできます。私の個人的なテストでは、TypeScript のサポートは比較的完全です。

反応的な

では、Provide/Inject を使用せずに状態管理を実現する他の方法はありますか?コードに直接。

共有状態の抽出

// src/context/calculator.ts

タイプ計算機 = {
    count: 数;
    増加: () => void;
    updateCount: (num: 数値) => void;
};

//共有状態 const calculatorStore = reactive<Calculator>({
    カウント: 1,
    増加: () => {
        計算機ストア.count++;
    },
    更新回数: (数値: 数値) => {
        計算機ストアのcount = num;
    }
});

エクスポート { calculatorStore };

共有状態の使用

状態を使用する方法は非常に簡単です。状態をインポートするだけです。状態を使用する必要があるコンポーネントをインポートする必要があります。

// src/views/any.vue

「vue」からdefineComponentをインポートします。
'@/context/calculator' から calculatorStore をインポートします。

エクスポートデフォルトdefineComponent({
  名前: "任意",
  設定（） {
    console.log(計算機ストア.count);
  }
});

まとめ

実際、このソリューションは、リアクティブの応答性と、同じインスタンスをインポートする原則を利用しています。依存性注入と比較すると、よりシンプルで大まかであり、TypeScript 検証も正しくサポートできます。ただし、依存性注入では異なるルートノードで異なるデータを共有できますが、このリアクティブソリューションでは常に 1 つのインスタンスが共有されるため、一部のビジネスシナリオには適用できません。