VuexからPiniaへ：新しいVueの状態管理
Vuexに苦しめられた日々を覚えていますか？延々と続くミューテーション、奇妙なcommitやdispatchの構文、そして頭を痛めるTypeScriptの型定義。Vueチームが私たちの願いを聞き届けたようで、Piniaがリリースされました。これは単なる状態管理ライブラリではなく、フロントエンド開発者の жизньを大幅に向上させるVuexの正式な後継です。
ところで、この名前は楽しい言葉遊びです。Piniaはスペイン語の「piña」（パイナップル）に音が似ています。作成者はストアをパイナップルに例えています：それは一朵の花が集まって一つの果物になるようなものです。アプリケーション内の各ストアは独立して生成されますが、最終的には一つのチームとして動作します。
Piniaとは、そしてなぜ必要なのか
端的に言えば、PiniaはComposition APIを完全にサポートしたVue用の軽量ストアです。サイズはわずか約1KBで、ホットモジュールリローディングをサポートし、DevToolsとの相性も良好です。
古いアプローチとの主な違いは、ミューテーションが存在しないことです。アクション内で直接stateを変更できるようになり、ボイラープレートコードが大幅に削減されます。Vue 3を使用しているなら、Piniaは事実上の標準です。まだVue 2を使用している人にも後方互換性があるため、移行が悲惨なことになる心配はありません。
開発者がこのストアを選ぶ理由
ワークフローを本当に変えるいくつかのポイントを特定しました。
箱から出してすぐに使えるTypeScriptサポート
Vuexでは、型定義は松葉杖を使っているような感覚でした。Piniaでは一切都合が異なります。TypeScriptで書かれているため、コード補完が完璧に機能します。すべてのゲッターやアクションに対してインターフェースを手動で記述する必要はなく、ライブラリが返す値を自分で判断してくれます。
余計な複雑さのないモジュール性
ネストされたモジュールや複雑なパスとはお別れです。Piniaでは、異なるファイルに異なるストアを作成し、必要な場所でインポートするだけです。これによりアーキテクチャがクリーンになります：各コンポーネントは実際に必要なデータのみを取得します。
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
},
},
})
シンプルな統合
数行のコードでライブラリを接続できます。Nuxtとうまく動作し、サーバーサイドレンダリング（SSR）もサポートしているのは素晴らしい点です。
import { createPinia } from 'pinia'
const pinia = createPinia()
app.use(pinia)
実際の動作
オンラインストアにショッピングカートがあると想像してください。以前は、モジュールを登録し、パスの命名規則に気を配り、ミューテーションを呼び出すアクションを書く必要がありました。Piniaでは、コンポーネント内でストアメソッドを通常の関数のように呼び出すだけです。
リアクティビティを失わずにデータを取得するには、便利なstoreToRefsヘルパーがあります。これは、ストアを分解してstateとの接続を壊さずに済む必要がある場合に活躍します。
import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'
const cart = useCartStore()
const { items, total } = storeToRefs(cart)
乗り換える価値はあるか
新しいVue 3プロジェクトを始めているなら、Pinia以外の選択肢はほとんどありません。よりシンプルで、より高速で、よりモダンです。古いVuexプロジェクトを持っているなら、急ぐ必要はありませんが、新機能にはこのアプローチを試すことをお勧めします。
このプロジェクトはVueコアチームのメンバーであるEduardo San Martin Morote（posva）によって積極的にメンテナンスされています。これにより、ライブラリが1ヶ月で消えることがないという信頼感があります。さらに、Piniaは優れたドキュメントと活気のあるコミュニティを持っています。
StackBlitzでプロジェクトを実際に試すことができます：
これが最適な人：
- Vuexの詳細さに厌倦している人。
- качественная автодополнение を評価するTypeScript愛好家。
- Piniaが推奨されるNuxt 3開発者。
唯一の欠点と言えるかもしれません—Vuexの厳格な構造と必須のミューテーションに慣れているなら、Piniaの自由さが最初は奇妙に感じられるかもしれません。でも、良いものにはすぐに慣れるものです。
関連プロジェクト