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 をよろしくお願いいたします。