vue3 における vuex と pinia の落とし穴

vue3 における vuex と pinia の落とし穴

導入

Pinia は、最近非常に人気が高まっている Vue.js 用の軽量な状態管理ライブラリです。 Vue 3 の新しいリアクティブ システムを使用して、直感的で完全に型指定された状態管理ライブラリを構築します。

Pinia の成功は、保存されたデータを管理するための独自の機能 (スケーラビリティ、ストレージ モジュールの構成、状態変更のグループ化、マルチストアの作成など) によるものです。

一方、Vuex は Vue フレームワーク用に構築された人気の状態管理ライブラリでもあり、Vue コアチームによって推奨されている状態管理ライブラリでもあります。 Vuex は、アプリケーションのスケーラビリティ、開発者の人間工学、信頼性に重​​点を置いています。これは Redux と同じフロー アーキテクチャに基づいています。

インストールと使用方法

vuexをインストールする

npm インストール vuex@next --save

cnpm インストール vuex@next --save-

糸を追加 vuex@next --save

piniaをインストールする

npm インストール pinia@next

cnpm インストール pinia@next

糸追加 pinia@next

インストール後は、以下の書き方に従って使用するだけです。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の利点

  • タイムトラベルや編集などのデバッグ機能をサポート
  • 大規模で複雑なVue.jsプロジェクトに適しています

Vuexのデメリット

  • Vue 3以降では、ゲッターの結果は計算プロパティのようにキャッシュされません。
  • Vuex 4には型安全性に関するいくつかの問題がある

ピニアの利点

  • 完全なTypeScriptサポート: Vuexで追加するよりもTypeScriptを追加する方が簡単です
  • 非常に軽量(約1KB)
  • ストアアクションは、Vuexで一般的なディスパッチメソッドやMapActionヘルパーを使用する代わりに、通常の関数呼び出しとしてディスパッチされます。
  • 複数の店舗をサポート
  • Vue devtools、SSR、webpack コード分割をサポート

ピニアのデメリット

  • タイムトラベルや編集などのデバッグ機能はサポートされていません

Pinia を使用する場合と Vuex を使用する場合

私の個人的な経験から言うと、Pinea は軽量でサイズが小さいため、小規模から中規模のアプリケーションに適しています。タイムトラベルや編集などの一部のデバッグ機能はまだサポートされていないため、複雑度の低い Vue.js プロジェクトにも適しています。

Vuex は重量級でパフォーマンスの低下に大きな影響を与えるため、小規模から中規模の Vue.js プロジェクトで使用するのはやりすぎです。したがって、Vuex は大規模で複雑度の高い Vue.js プロジェクトに適しています。

要約する

これで、vue3 の vuex と pinia の落とし穴に関するこの記事は終わりです。vue3 の vuex と pinia の落とし穴に関するより関連性の高い記事については、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue の状態管理: Vuex の代わりに Pinia を使用する
  • Vueエコシステムの新メンバーであるPiniaの詳細な紹介
  • Vue の新しい状態管理ライブラリ Pinia を使い始める
  • まだvuexをお使いですか?piniaについて学ぶ
  • Vue3とPiniaの落とし穴の実践記録
  • Vue3 状態管理のための Pinia 入門チュートリアル

<<:  MySQL データベースの手動およびスケジュールされたバックアップ手順

>>:  CSS3で蓮の花が咲くアニメーション効果を実現

推薦する

HTML でよく使われるメタ百科事典 (推奨)

メタタグは、HTML言語のヘッド領域にある補助タグです。HTML文書のヘッダーにあるヘッドタグとタイ...

2 つの Linux サーバー間の自動ファイル同期

サーバーB(172.17.166.11)の電源がオンまたは再起動されると、サーバーA(172.17....

MYSQLストアドプロシージャ、つまり一般的な論理知識のポイントの要約

MySQL ストアド プロシージャ1. ストアドプロシージャ構文(フォーマット)を作成する 区切り文...

Vue はカードフリップカルーセル表示を実装します

Vueカードのフリップカルーセル表示、フリップ時にデータを切り替えながら、参考までに、具体的な内容は...

WindowsはVMwareを使用してLinux仮想マシンを作成し、CentOS7.2オペレーティングシステムをインストールします。

目次1. ウィザードに従って仮想マシンを作成します2. オペレーティングシステムをインストールします...

Linux のスケジュールされたタスクの crontab のインストールと使用の詳細な説明

crontabをインストールするyum install crontabs CentOS 7が付属して...

JS で配列の重複排除を実装する 7 つの方法

目次1. Set()+Array.from() を使用する2. 2層ループ+アレイ接合方式の使用3....

MySQLデータベースバックアップのさまざまな実装方法の概要

この記事では、MySQL データベースのバックアップを実装するさまざまな方法について説明します。ご参...

Windows10でmysql8.0.17を置き換える詳細なチュートリアル

この記事では、Windows10でmysql8.0.17を置き換える具体的な手順を参考までに紹介しま...

JavaScript DOMContentLoaded イベントのケーススタディ

DOMContentLoaded イベント文字通り、DOM がロードされた後に実行されます。 win...

Centos8.2 クラウド サーバー環境に Tomcat8.5 をインストールするための詳細なチュートリアル

Tomcatをインストールする前に、まずJDK環境をインストールしてくださいLinux サーバー上で...

スタイル属性 (element.style) で定義されたインライン スタイルを削除する方法

Magento を頻繁に変更する場合、element.style に遭遇することがあります。 これは...

海外でダウンロードできる25個の新鮮で便利なアイコンセット

1. Eコマースアイコン2. アイコンスイーツ2 3. 携帯電話アイコンパック4. 旗アイコンセット...

IDEA で mysql8.0.3 と mybatis-generator を使用する際に発生するバグ

1. プラグインを追加し、pomファイルの下に次の設定を追加します。 <!-- mybatis...

LinuxでSVNサーバーを構築する方法

1: SVNをインストールする yum インストール -y サブバージョン2. 倉庫を作る1: 倉庫...