状態管理は、ここ数年、急速に変化するフロントエンドWeb開発の世界でホットな話題になっています。 正当な理由があります。 一貫した状態を維持することは、予想よりも難しいことがよくありますが、絶対に重要です。

ありがたいことに、これを処理するライブラリはたくさんあります。 ReactにはReduxとMobXがあり、AngularにはngrxとReduxポートがありますが、 Vue には何がありますか？ さて、ここにVueとその長所と短所で利用可能なさまざまな状態管理ライブラリの概要があります。

Vuex

Vuex について言及せずに、Vueの状態管理について話すことは絶対に犯罪です。 Vuexは、Vueの公式の状態管理プラグインです。 シンプルで使いやすいAPIを使用してFluxパターンを実装します。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜5,000つ星
  • 主な開発者： Evan You （Vueリード開発者）
  • ドキュメントの品質：完全
  • 不変性：開発：いいえ、生産：警告
  • 単一状態オブジェクト：はい
  • モジュラー状態ツリー：はい
  • 非同期ミューテーション：はい（アクションを介して）
  • リポジトリ： https://github.com/vuejs/vuex

長所

  • 比較的単純なAPI。
  • 明確なドキュメントと例。
  • 非同期アクションのサポート。
  • 堅実な開発見通し、引き続き活発である可能性が高い。

短所

  • アクセスする予定の状態のスライスごとにゲッターを定義する必要があります。
  • コードの臭いのように見える可能性のある、コンポーネントに奇妙な計算プロパティとメソッド注入パターンが必要です。
  • 魔法のように見えることもありますが、定義が使用法にどのようにマッピングされるかが常に明確であるとは限りません。

結論（TL; DR）

Vuexは堅実でアクティブであり、操作するのにかなりまともなライブラリです。 多くの人が依存するアプリケーションを開発している場合は、Vuexを使用してください。 ドキュメントはかなり役に立ちますが、小さなプロジェクトではおそらくやり過ぎであり、すぐに理解しないとイライラする可能性があります。

レビュー

Redux 開発者、恐れることはありません！ VueをReduxと直接統合できる優れた方法があります：Revue。

残念ながら、Revueプロジェクトはもはや維持されていません。

流れ落ちる

  • 積極的に開発：いいえ
  • 人気：〜400つ星
  • 主な開発者： EGOIST
  • ドキュメントの品質： Basic （Reduxドキュメントを使用）
  • 不変性：いいえ、追加のライブラリが必要です。
  • 単一状態オブジェクト：はい
  • モジュラー状態ツリー：はい（レデューサーの組み合わせによる）
  • 非同期ミューテーション：いいえ（複数のアクションと状態変数を使用して実現）
  • リポジトリ： https://github.com/revue/revue

長所

  • Reduxの軽量ラッパーで、慣れているようにReduxを使用できます。

短所

  • Reduxに慣れていない場合、Reduxを使用するのは面倒です。
  • Vuexまたはvue-stashよりもかなり冗長です。
  • 長期的な開発保証はありません。

結論（TL; DR）

Reactのバックグラウンドを持っていて、Reduxが大好きな場合は、Revueを検討してください。 Vueを使い始めたばかりの場合は、代わりに以下のvue-stashを試してみてください。

vue-stash

vue-stash は、状態管理プラグインの基本です。 これは、実際には、リアクティブオブジェクトをコンポーネントツリーにグローバルに注入する方法にすぎません。 これにより、開始が非常に簡単になりますが、不変の状態ツリーなど、より高度な機能は提供されません。

流れ落ちる

  • 積極的に開発：はい
  • 人気：〜100つ星
  • 主な開発者： Cody Mercer
  • ドキュメントの品質：基本
  • 不変性：いいえ
  • 単一状態オブジェクト：はい
  • モジュラー状態ツリー： N / A （状態ツリーはプレーンJSオブジェクトです）
  • 非同期ミューテーション： No （直接プロパティミューテーション）
  • リポジトリ： https://github.com/cklmercer/vue-stash

長所

  • クレイジーシンプル。 これは、実際には、コンポーネントにグローバルに注入する単なるオブジェクトです。

短所

  • 不変ではありません。
  • アクション/ミューテーションの抽象化はありません。 通常どおりにプロパティにアクセスして変更するだけです。
  • 長期的な開発保証はありません。

結論（TL; DR）

可能な限り最小限のAPIサーフェスと、それを設定するための最小限の作業が必要であり、長期的な要件があまりない場合は、vue-stashが最適です。

Vue Freeze

vue-freeze にも非常にシンプルなAPIがあり、状態とアクションのみを提供します。 すべてのアクションは非同期であり、すべての状態プロパティは不変です。 （ Freezer.js によって提供される不変性）

流れ落ちる

  • 積極的に開発：いいえ更新サイクルが非常に遅い
  • 人気：〜100つ星
  • 主な開発者： Naufal Rabbani
  • ドキュメントの品質：悪い
  • 不変性：はい（フリーザーが提供）
  • 単一状態オブジェクト：はい
  • モジュラー状態ツリー：いいえ（アクションはすべてルートツリーにありますが、手動で名前を付けることができます）
  • 非同期ミューテーション：はい、デフォルトで
  • リポジトリ： https://github.com/BosNaufal/vue-freeze

長所

  • 特にFreezerに既に精通している場合は、APIを簡単に習得できます。
  • デフォルトで不変性を提供します。

短所

  • すべてのアクションは非同期です。
  • ドキュメントはほとんどありません。
  • アクション/ミューテーションの抽象化はありません。 通常どおりにプロパティにアクセスして変更するだけです。
  • 長期的な開発保証はありません。

結論（TL; DR）

プロジェクトで不変性が絶対に必要な場合は、APIサーフェスを設定しても問題ありません。また、 Freezer が提供する柔軟性が気に入った場合は、 VueFreezeを選択できます。

これが、どのVue状態管理ライブラリを使用するかを決定するのに役立つことを願っています。 ほとんどのプロジェクトでは、おそらく Vuex を使い続けたいと思うでしょうが、他に何があるかを知っておくのは良いことです。

不足している、または追加する必要があると思われるものがある場合は、ご意見をお聞かせください。