背景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 の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Tomcat が応答データグラムを書き戻すタイミングの詳細な分析
>>: MySQLデータベースイベントスケジュール実行タスクの詳細な説明
<br />情報の重複、情報過多、情報強迫、パーソナライズされたカスタマイズ、検索エンジ...
データの初期化 `test_01` が存在する場合はテーブルを削除します。 テーブル「test_01...
CSS の背景: background:#00ffee; //背景色を設定するbackground-...
日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...
1. ポジショニングとは何ですか? CSS の position 属性には、absolute/re...
1. less依存関係をインストールします: npm install less less-loade...
閉鎖サービス nginx 停止systemctl 停止 nginx起動するサービス nginx 開始...
● 新しいプロジェクトのセキュリティを確保するためにクラウド データを購入する予定でした。 Alib...
docker を使用すると、ファイルをマウントできない場合があります。これは、仮想マシンの共有フォル...
以下のように表示されます。名前説明する文字可変(n)、varchar(n)長さ制限あり、可変長文字(...
目次データブローカーとイベントObject.defineProperty メソッドのレビューデータブ...
OpenShift 3.9 の最新バージョンを体験する最も早い方法。準備 [root@host ~]...
始める段階から初心者になるまで、Linux オペレーティング システムは不可欠です。最初のステップは...
背景同僚がセキュリティ プロジェクトに取り組んでおり、AWS サーバーに秘密兵器を展開する必要があり...
CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...