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で蓮の花が咲くアニメーション効果を実現

推薦する

Mysql クラシック高レベル/コマンドライン操作 (クイック) (推奨)

サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...

Docker で MySQL マスターとスレーブをデプロイする方法

画像をダウンロードMySQLイメージの選択 docker 検索 mysql MySQL 5.7 イメ...

Vue プロジェクトで SVG コンポーネントをパッケージ化して構成する手順

最近新しい会社に入社しました。プロジェクトに携わった後、タイトルアイコンが svg で作られていると...

mysql-canal-rabbitmq のインストールと展開の非常に詳細なチュートリアル

目次1.1. MySQL binlog を有効にする1.2. RabbitMQ の交換とキューを構成...

Docker ベースの Redis 1 マスター、2 スレーブ、3 センチネルの実装

現在、Redis とコンテナについて学習中なので、Docker を使用して Redis マスタースレ...

Nginx 静的サービス設定の詳細な説明 (ルートとエイリアスの指示)

静的ファイルNginx は高いパフォーマンスで知られており、フロントエンドのリバース プロキシ サー...

MySQL がタイムスタンプを使用するときにタイムゾーンの問題を無視できるのはなぜですか?

私はいつも、なぜMySQLデータベースのtimestampタイムゾーンの問題を無視できるのか疑問に思...

Docker に Elasticsearch 7.6.2 をインストールするチュートリアル

DockerをインストールするDocker をインストールする必要がありますが、それ以上の指示はあり...

njs モジュールを使用して nginx 構成に js スクリプトを導入する

目次序文1. NJSモジュールをインストールする方法1: NJSモジュールを動的にロードする方法2:...

MySQLのインストールと設定に関する詳細なチュートリアル

目次インストール不要のMySQLバージョン1. インストール パッケージをダウンロードします。 2....

JavaScript タイピングゲーム

この記事では、タイピングゲームを実装するためのJavaScriptの具体的なコードを参考までに紹介し...

Docker デプロイメント Springboot プロジェクト例の分析

この記事は主に、docker デプロイメント springboot プロジェクトのサンプル分析を紹介...

HTML タグのカスタム属性に関する質問

以前の開発では、クラス、名前などの HTML のデフォルト属性を使用していました。 Huawei社の...

LinuxでTomcatのポート番号を変更する方法

ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...