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

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 つのインスタンスが共有されるため、一部のビジネス シナリオには適用できません。

結論

まず、Vuex はまだより成熟した包括的なソリューションです。これは単純な状態管理のためだけのものであり、考え方を変えて解決することができます。もちろん、上記のソリューションにはまだ多くの不完全な考慮事項がある可能性がありますので、アドバイスをいただければ幸いです。

上記は、Vue3 状態管理の使用に関する詳細な説明の詳細な内容です。Vue3 状態管理の使用に関する詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vueの状態管理にVuexを使用する方法の詳細な説明
  • 状態管理に Vuex を使用する方法についての説明 (要約)
  • vuex を使用して状態ウェアハウスを管理する詳細な説明
  • Vuex 状態管理データ ステータスのクエリと変更方法

<<:  Tomcat が応答データグラムを書き戻すタイミングの詳細な分析

>>:  MySQLデータベースイベントスケジュール実行タスクの詳細な説明

ブログ    

推薦する

MySQL無料インストール版のパスワード設定に関する詳細なチュートリアル

方法1: SET PASSWORDコマンドを使用する MySQL -u ルート mysql> ...

Nodeはリクエスト追跡にasync_hooksモジュールを使用します

async_hooks モジュールは、Node.js バージョン 8.0.0 に正式に追加された実験...

Vue3 Vue CLI マルチ環境設定

目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...

Linux での中国語入力方法の問題を素早く解決する

背景: 最近、資産報告関連の機能に取り組んでおり、中国語入力をサポートする必要があります。通常のショ...

MySQL シリーズ 10 同時実行制御を実装するための MySQL トランザクション分離

目次1.同時アクセス制御2. 取引1. トランザクションは ACID 原則に従います。 2. トラン...

ウェブページの読み込み速度を上げる6つのヒント

第二に、キーワードのランキングは、Webページの表示速度にも関係しています(参照:キーワードランキン...

Linux で MySQL データベースのデータ ファイル パスを変更する手順

rpm インストール方法を使用して MySQL データベースをインストールした後、データ ファイルの...

Docker イメージの作成、アップロード、プル、およびデプロイ操作 (Alibaba Cloud を使用)

学習プロセス中にプッシュ イメージが常にタイムアウトすることがわかったため、Alibaba Clou...

Linux で yum と入力した後に -bash: /usr/bin/yum: No such file or directory という問題を解決する方法

Linuxでyumを入力すると、プロンプトが表示されます: -bash: /usr/bin/yum:...

jQueryはフェードインとフェードアウト効果を実現します

jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...

Node の SMS API で検証コード ログインを実装するためのサンプル コード

1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...

VMware に Centos8 をインストールする詳細なチュートリアル

CentOS公式サイトアドレスhttps://www.centos.org/まず必要なファイルをダウ...

Js でオブジェクトのディープ オブジェクトを安全に取得するメソッドの例

目次序文文章パラメータ例Lodash 実装:トーキー機能: castPath関数: stringTo...

JavaScript 操作要素の例

操作要素の詳細については、前回の記事を参照してください。JavaScript WebAPI、DOM、...

Reactのdiffアルゴリズムの詳細な分析

Reactのdiffアルゴリズムの理解diffアルゴリズムは、 Virtual DOMの変更された部...