導入Pinia は、最近非常に人気が高まっている Vue.js 用の軽量な状態管理ライブラリです。 Vue 3 の新しいリアクティブ システムを使用して、直感的で完全に型指定された状態管理ライブラリを構築します。 Pinia の成功は、保存されたデータを管理するための独自の機能 (スケーラビリティ、ストレージ モジュールの構成、状態変更のグループ化、マルチストアの作成など) によるものです。 一方、Vuex は Vue フレームワーク用に構築された人気の状態管理ライブラリでもあり、Vue コアチームによって推奨されている状態管理ライブラリでもあります。 Vuex は、アプリケーションのスケーラビリティ、開発者の人間工学、信頼性に重点を置いています。これは Redux と同じフロー アーキテクチャに基づいています。 インストールと使用方法vuexをインストールする
piniaをインストールする
インストール後は、以下の書き方に従って使用するだけです。vuex が使えるようになれば、pinia の基本的な使い方は使えます。pinia プラグインの書き方はここでは示しません。 文章の相違点と類似点の簡単な比較Vuex と pinia は同じチームメンバーによって書かれていますが、pinia の方がユーザーフレンドリーでシンプルです。 vue3 で vuex を記述して使用する方法 //ストア.js 'vuex' から {createStore} をインポートします。 エクスポートデフォルトcreateStore({ // データ状態を定義する: { a:1 }, // メソッドのミューテーションを定義する: { xxx(州,番号){ state.a = 数値 } }, // 非同期メソッドアクション: { }, // データを取得するゲッター: { getA:state=>return state.a } }) // vue3 で <template> を使用する <div> {{番号}} <button @click="clickHandle">ボタン</button> </div> </テンプレート> <スクリプト> 「vuex」から {useStore} をインポートします。 エクスポートデフォルト{ 設定(){ store = useStore() とします // ⭐⭐⭐ 状態の値を直接取得する場合は、データの応答性を実現するために computed を使用する必要があります。store.state.a を直接取得すると、データの変更を監視できません。または getter を使用する場合は、computed を使用する必要はありません。 数値 = computed(()=>store.state.a) とします。 const クリックハンドル = () => { store.commit("xxx","100") } 戻り値{数値,クリックハンドル} } } <スクリプト> vue3 で pinia を記述して使用する方法 //ストア.js 'pinia' から {defineStore} をインポートします // defineStore は呼び出し後に関数を返します。この関数を呼び出して Store エンティティを取得します。export const GlobalStore = defineStore({ // id: 必須、すべてのストア間で一意 id: "myGlobalState"、 // state: オブジェクトの状態を返す関数: () => ({ a: 1、 })、 ゲッター: {}, アクション: { setXXX(数値) { this.a = 数値; }, }, }); // vue3 で <template> を使用する <div> {{番号}} <button @click="clickHandle">ボタン</button> </div> </テンプレート> <スクリプト> 「@/store/store.js」から {GlobalStore} をインポートします。 エクスポートデフォルト{ 設定(){ ストアを GlobalStore() にします。 // ⭐⭐⭐ 状態の値を直接取得する場合は、データの応答性を実現するために computed を使用する必要があります。store.state.a を直接取得すると、データの変更を監視できません。または getter を使用する場合は、computed を使用する必要はありません (これは vuex と同じです) 数値 = 計算された値 (() => store.a) とする const クリックハンドル = () => { ストア.setXXX("100") } 戻り値{数値,クリックハンドル} } } <スクリプト> これら 2 つのコードを比較すると、pinia を使用する方が簡潔で軽量であることがわかります。 pinia は元の変更をキャンセルし、アクションにマージします。値を取得するときは、.state を使用せずに値を直接クリックできます。メソッドについても同様です。 VuexとPiniaの長所と短所Vuexの利点
Vuexのデメリット
ピニアの利点
ピニアのデメリット
Pinia を使用する場合と Vuex を使用する場合私の個人的な経験から言うと、Pinea は軽量でサイズが小さいため、小規模から中規模のアプリケーションに適しています。タイムトラベルや編集などの一部のデバッグ機能はまだサポートされていないため、複雑度の低い Vue.js プロジェクトにも適しています。 Vuex は重量級でパフォーマンスの低下に大きな影響を与えるため、小規模から中規模の Vue.js プロジェクトで使用するのはやりすぎです。したがって、Vuex は大規模で複雑度の高い Vue.js プロジェクトに適しています。 要約するこれで、vue3 の vuex と pinia の落とし穴に関するこの記事は終わりです。vue3 の vuex と pinia の落とし穴に関するより関連性の高い記事については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL データベースの手動およびスケジュールされたバックアップ手順
サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...
画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...
最近新しい会社に入社しました。プロジェクトに携わった後、タイトルアイコンが svg で作られていると...
目次1.1. MySQL binlog を有効にする1.2. RabbitMQ の交換とキューを構成...
現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...
静的ファイルNginx は高いパフォーマンスで知られており、フロントエンドのリバース プロキシ サー...
私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...
DockerをインストールするDocker をインストールする必要がありますが、それ以上の指示はあり...
目次序文1. NJSモジュールをインストールする方法1: NJSモジュールを動的にロードする方法2:...
目次インストール不要のMySQLバージョン1. インストール パッケージをダウンロードします。 2....
この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...
この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...
書き方1: sas_order_supply_month_pay セットを更新 RECEIVE_TI...
以前の開発では、クラス、名前などの HTML のデフォルト属性を使用していました。 Huawei社の...
ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...