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データベースイベントスケジュール実行タスクの詳細な説明

推薦する

Web2.0: 情報過多の原因と解決策

<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...

MySQLを水平から垂直に、垂直から水平に変換する方法

データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...

CSSの一般的なプロパティ

CSS の背景: background:#00ffee; //背景色を設定するbackground-...

WeChatアプレット開発の実践スキル:データの転送と保存

日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...

CSS 配置レイアウト (位置、配置レイアウト スキル)

1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...

Vueでlessを使用する問題を解決する

1. less依存関係をインストールします: npm install less less-loade...

nginx をシャットダウン/再起動/起動する方法

閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...

MySQL マスタースレーブ構成の学習ノート

● 新しいプロジェクトのセキュリティを確保するためにクラウド データを購入する予定でした。 Alib...

DockerToolBox ファイルマウント実装コード

docker を使用すると、ファイルをマウントできない場合があります。これは、仮想マシンの共有フォル...

PostgreSQL データベースにおける varchar、char、text の比較に関する簡単な説明

以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...

JavaScript データ プロキシとイベントの詳細な分析

目次データブローカーとイベントObject.defineProperty メソッドのレビューデータブ...

OpenShift のクイックインストールの詳細な手順

OpenShift 3.9 の最新バージョンを体験する最も早い方法。準備 [root@host ~]...

VMware Workstation のインストール Linux システム

始める段階から初心者になるまで、Linux オペレーティング システムは不可欠です。最初のステップは...

Dockerのデフォルトネットワークセグメントの正しい変更手順

背景同僚がセキュリティ プロジェクトに取り組んでおり、AWS サーバーに秘密兵器を展開する必要があり...

CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...