Vueを学ぶ

第9章. Piniaによる状態管理

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

前の章では、ネストされたルート、ルート・ガード、ダイナミック・ルート・ナビゲーションなど、Vue Routerを使ったアプリケーションのルーティングの構築について説明した。

この章では、Vueで公式に推奨されている状態管理ライブラリであるPiniaを使用して、状態管理とVueアプリケーション内のデータフローを管理する方法を学ぶ。また、アプリケーションの再利用可能で効率的なデータ状態管理システムを構築する方法を探る。

Vueの状態管理を理解する

データはアプリケーションに生命を吹き込み、コンポーネントをつなぐ。そしてコンポーネントは、データの状態を使ってユーザや他者と対話する。状態管理は、サイズや複雑さに関係なく、実際のデータで動作するアプリケーションを構築する上で非常に重要だ。例えば、ピザとその詳細のリストを持つ商品カードのギャラリーだけを表示することができる。ユーザがこのギャラリーコンポーネント内のカートに商品を追加したら、カートのデータを更新し、選択した商品の残りの在庫を更新すると同時に、更新されたカートのデータをカートコンポーネントに表示する必要がある 。

例えば、ピザ・ハウスのアプリケーションを見てみよう。メインビュー(App.vue)には、ヘッダコンポーネント(HeaderView)とピザカードのギャラリー(PizzasView)がある。ヘッダにはカートアイコンがあり、カートにあるアイテムの数を表示する。一方、ギャラリーにはピザカードのリストがあり、それぞれユーザが選択したアイテムをカートに追加できるボタンがついている。図9-1はメインビューからのコンポーネントの階層構造を示している。

図9-1. Pizza Houseのメインビューから見たコンポーネントの階層構造

ユーザがカートにピザを追加すると、カートアイコンは更新されたアイテム数を表示する。ヘッダコンポーネントとギャラリーコンポーネントの間のデータ通信を可能にするために、図9-2で見られるように、App にcart データを管理させ、イベントupdateCart を使ってギャラリーと通信しながら、そのデータをpropsとしてヘッダに渡すことができる。

図9-2. ギャラリーとヘッダ間のデータフロー（アプリを仲介とする

このアプローチは、小規模なアプリケーションではうまくいく。しかし、PizzasView を、PizzasGallery のようなサブコンポーネントに分割し、PizzasGallery に各ピザ用のPizzaCard コンポーネントをレンダリングさせたいとする。それぞれの新しい親子レイヤーに対して、図9-3のように、ギャラリーとヘッダ間のデータフローの伝搬を確実にするために、updateCart イベントを伝搬する必要がある。

コンポーネントやレイヤーが増えると、より複雑になり、不必要なプロップやイベントがたくさん残ることになる。その結果、このアプローチは、アプリケーションが成長したときにスケーラビリティとメンテナンス性が低下する可能性がある。 ...