導入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 データベースの手動およびスケジュールされたバックアップ手順
メタタグは、HTML言語のヘッド領域にある補助タグです。HTML文書のヘッダーにあるヘッドタグとタイ...
サーバーB(172.17.166.11)の電源がオンまたは再起動されると、サーバーA(172.17....
MySQL ストアド プロシージャ1. ストアドプロシージャ構文(フォーマット)を作成する 区切り文...
Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...
目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...
crontabをインストールするyum install crontabs CentOS 7が付属して...
目次1. Set()+Array.from() を使用する2. 2層ループ+アレイ接合方式の使用3....
この記事では、MySQL データベースのバックアップを実装するさまざまな方法について説明します。ご参...
この記事では、Windows10でmysql8.0.17を置き換える具体的な手順を参考までに紹介しま...
DOMContentLoaded イベント文字通り、DOM がロードされた後に実行されます。 win...
Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...
Magento を頻繁に変更する場合、element.style に遭遇することがあります。 これは...
1. Eコマースアイコン2. アイコンスイーツ2 3. 携帯電話アイコンパック4. 旗アイコンセット...
1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...
1: SVNをインストールする yum インストール -y サブバージョン2. 倉庫を作る1: 倉庫...