2 つの Vue 状態管理ライブラリである Pinia と Vuex について話しましょう。どちらを使用すればよいでしょうか?

この記事では Vue の状態管理について説明し、2 つの Vue 状態管理ライブラリである Pinia と Vuex を紹介します。

Vuex と Pinia は、Vue.js アプリケーションの状態を管理するための標準 Vue.js ライブラリです。コード、言語、機能、コミュニティ サポートを比較してみましょう。

適切なライブラリがなければ、開発者がアプリケーションの状態を管理することが困難になる可能性があります。 Vuex と Pinia は、アプリケーションで条件を処理するための標準 Vue.js ライブラリです。どちらのライブラリも状態管理には優れていますが、その優れた特徴と機能により、プロジェクトにどのライブラリを使用するかを選択するのに時間がかかり、イライラすることがあります。この記事では、なぜその 1 つが最高なのかを見ていきます。

この記事では、理解を深めるために実際のコード例を使用して、コードの比較、そのバリアント、機能、および状態アプリケーションの管理にどのコードを使用することが推奨されるかを見ていきます。各製品の言語、機能、コミュニティ サポートについても考慮します。

Pinia と Vuex の紹介

Vuex と Pinia について簡単にまとめます。より詳しい説明が必要な場合は、Vuex のドキュメントと Pinia のドキュメントを読むことをお勧めします。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]

Ponia とは何ですか?

Pinia は、Vue.js アプリケーションのコンポーネント全体で応答データと状態を管理および保存するのに役立つ新しい状態管理ライブラリです。 Pinia は、Vue チームのコア メンバーの 1 人である Eduardo San Martin Morote によって作成されました。

Pinia は、新しいリアクティブ システムを使用して、直感的で完全に型指定された状態管理システムを構築します。

ライブラリに導入された新機能は、Ponia の推奨に貢献した要因の 1 つでした。全体的に見て、Ponia は軽量でシンプル、そして使いこなしやすいようです。 Vue 3 および Vue 2 でのプログラミングをユニバーサルにするためのすべてが備わっています。したがって、これは Pinia を試してみる絶好の機会です。

Vuex とは何ですか?

Vuex は、Vue アプリケーションに存在するすべてのコンポーネントの状態を維持するのに役立つ集中ストアとして構築された状態管理パターンおよびライブラリです。 Vuex は、状態が予測された基準に確実に変化するようにするルールに従います。

Vuex をさらに強力にする点の 1 つは、コンポーネントが Vuex ストアから状態を取得し、ストア状態の変化に迅速かつ効率的に対応できることです。

Vuex はストアを維持する状態管理ライブラリですが、大規模な SPA に精通しているか、大規模な SPA を構築したことがあることをお勧めします。経験がない場合、Vuex は冗長で威圧的なものになる可能性があります。

アプリケーションが大規模で、複雑なデータ フローを管理する必要があり、コンポーネントがネストされている場合は、Vuex を使用できます。 Vuex をいつ使用するかについての詳細は、公式ドキュメントを参照してください。

Pinia の特徴

Pinia と Vuex の違いの 1 つは、Pinia が「モジュール設計」であることです。は複数のストアを持つように構築されていますが、Vuex には 1 つのストアしかありません。これらのストアではサブモジュールを入手できます。これに加えて、Pinia では、これらの各モジュールをストアから必要なコンポーネントに直接インポートできます。

モジュラー設計

あなたが Vue 開発者で、アプリケーションの状態を管理するために Vuex を使用したことがある場合は、Vuex がそこにあることに気づくでしょう。は一店舗のみです。このストアでは、複数のモジュールを含めることができます。 Pinia を使用すると、これらの各モジュールを 1 か所に保存し、必要に応じてコンポーネントに直接インポートできます。

このメソッドを使用すると、バンドラーが自動的にコードを分割し、より適切な TypeScript 推論を提供できるようになります。

完全な開発ツール サポート

Pinia は、このライブラリを使用して簡単にビルドおよびデバッグできるようにする開発ツール サポートを提供します。 Pinia をインストールすると、自動的に Vue.js 開発ツールに接続され、ストアに加えられた変更を追跡できるようになります。これにより、Vue.js バージョン (Vue 2 および Vue3) の開発者エクスペリエンスにスムーズにアクセスできるようになります。

Pinia は直感的です

Pinia は、コンポーネントの作成と同じようにストアの作成をシンプルかつ整理できるシンプルな API を提供します。これは、Vuex ソリューションと比較して、習得する定型文や概念が少ないことを意味します。

Pinia は拡張可能です

Pinia は、取引やローカル ストレージ同期などの機能を備えた完全なプラグイン システムも提供します。 Pinia のデフォルトの動作では不十分です。

TypeScript サポート

Pinia は Vuex よりも優れた TypeScript サポートを提供し、JavaScript オートコンプリートを備えているため、開発プロセスが簡素化されます。

Pinia は軽量

Pinia の重さはわずか 1 KB なので、プロジェクトに簡単に組み込むことができます。これにより、アプリケーションのパフォーマンスが向上する可能性があります。

Vuex の機能

モジュール

アプリケーションがスケールすると、トラバーサルが必要になります。難しい。ただし、Vuex モジュールを使用すると、ドメイン機能に基づいてストアを複数のファイルに分割し、その特定の名前空間内のモジュールから状態ループにアクセスできます。

開発ツールのサポート

Vue devtools の Vuex タブでは、ステータスを表示し、変更を追跡できます。これにより、プログラムのパフォーマンスを迅速に評価し、エラーをデバッグできるようになります。

ホット リロード

Vuex はホット リロード機能をサポートしています。Webpack のホット モジュール置換 API を使用して、開発時にすばやくリロードします。ミューテーションが含まれています、モジュール、アクション、ゲッター。

TypeScript のサポート

TypeScript ストレージ定義を作成する場合、Vuex はその型を提供し、実装を容易にします。デフォルトの TypeScript 構成があり、追加のセットアップは必要ありません。

Pinia と Vuex のコード比較

Pinia は、アプリケーション全体のリアクティブ状態の管理に役立つ軽量ライブラリです。 Vuex と比較して、Pinia API は学習が簡単で、コードが読みやすくなります。

Ponia と Vuex を使用して状態を管理するコードの比較を見てみましょう:

Vuex

この例では、次のことを見ていきます。 To-Do リスト項目のステータスを追跡するシンプルな Vuex ストア:

import { createStore } from 'vuex'const TodoListstore = createStore({
  state() {
    return {
      todoListItems: []
    }
  },
  actions: {
    addNewList({ commit }, item) {
    {
      commit('createNewItem', item)
    }
  },
  mutations: {
    createNewItem(state, item) {
      state.todoListItems.push(item)
    }
  }})

上記のコードを見ると、Vuex ストアに状態、アクション、ミューテーションという 3 つのアクションがあることがわかります。状態は現在の todoListItems を返し、アクションは新しい項目を作成するためのミューテーションを送信し、最後にミューテーションによって新しい項目が作成されてリストに追加されます。より大きなアプリケーションを構築すると、アクションと突然変異が比較的類似しており、状態変更ごとにボイラープレートが必要になるため、コードが冗長になることに気づくかもしれません。

Pinia

Pinia シンプル API を使用すると、突然変異や冗長なコードを排除できます。コード例を見て、Pinia を使用して実装したときに前のコードがどのように見えるかを確認してみましょう:

import { defineStore } from 'pinia'Export const useListStore = defineStore('list', {
  state() => ({
    return {
      todoListItems: []
    }
  }),
  actions: {
    addNewList() {  
      this.todoListItems.push(item)
    }
  }})

上記の例は、アプリケーションの状態を管理するときに Pinia API がどのように動作するかを示す簡単なコードです。 Pinia を使用して突然変異を削除し、それをアクションに直接更新しました。

注: 上記のコード例では、アイテムをアクションに直接送信するときにアイテムを追跡する必要はありません。

Pinia と Vuex の長所と短所

Pinia と Vuex はアプリケーションの状態を制御するための優れたツールですが、一方がもう一方が持っているものを備えている必要があります。 . 一部ご利用いただけない機能がございます。それらが何であるかを見てみましょう。

Pinia の利点

• Pinia を使用すると、ページをリロードせずにストアを変更できます。
• TypeScript のサポートと、JavaScript での優れたオートコンプリート機能を提供します。
• Pinia は、ツールを使用した開発者のエクスペリエンスを向上させるのに役立つ devtool サポートを提供します。
• Pinia には状態、ゲッター、アクションのみがあります。突然変異は必要ありません。
• Ponia を使用すると、状態を 1 か所に保存し、リクエストに応じてコンポーネントに渡すことができます。
• これは 1 KB の軽量ライブラリです。
• 追加作業なしで、サーバー側のレンダリング サポートと自動入力モジュールを提供します。
• Pinia は Vue 2 および Vue 3 と互換性があります。

Ponia の欠点

• Vuex と比較すると、大規模なコミュニティ サポートやソリューションがありません。
• Pinia は、タイムトラベルや編集などのデバッグ機能をサポートしていません。

Vuex の利点

• Vuex にはミューテーション、ゲッター、アクションがあります。
• Pinia と比較して、Vuex には優れたコミュニティ サポートがあります。
• Vuex は、タイムトラベルや編集などのデバッグ機能をサポートしています。

Vuex の欠点

• Vuex は TypeScript に適していません。
• 大規模なスパでのみ使用できます。

#Pinia と Vuex のどちらを使用すればよいですか?

そうですね、ここがさらに難しいところです。Ponia が新しく推奨される状態管理ライブラリであるにもかかわらず、ステートフル アプリケーションに Vuex を使用する必要があるプロジェクトがまだいくつかあるからです。 Vuex には、Vuex にはない貴重な機能がいくつかあります。

Vuex は、小規模から中規模のアプリケーションを構築するユーザーにとっては非常に冗長であるため、大規模な SPA を構築する場合には依然として理想的なソリューションです。

ピニアも同様です。それにもかかわらず、devtool サポート、TypeScript サポート、ステートフル アプリケーションの簡単な管理など、リストされているすべての機能が必要な場合は、Pinia が最適なソリューションです。スムーズな開発エクスペリエンスを提供します。

それほど複雑でないアプリケーションを構築している場合は、中規模から大規模なものまで、約 1 KB の Pinia を使用できます。

結論

さまざまな機能があるため、アプリケーションの状態を管理する場合、Vuex と Ponia のどちらを選択するかが混乱する可能性があります。ただし、どちらのフレームワークもステートフル アプリケーションの管理に適しています。この記事では、それらの機能、機能、コードへの影響を簡単に比較します。この記事を読めば、自分に合ったライブラリが見つかるかもしれません。

(学習ビデオ共有: vuejs 入門チュートリアル 、基本プログラミング ビデオ )

以上が2 つの Vue 状態管理ライブラリである Pinia と Vuex について話しましょう。どちらを使用すればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。