【Vue.js】Piniaを使った状態管理の始め方｜Vuexとの違いと移行ガイド

Vue 3の公式状態管理ライブラリとしてPiniaが採用され、従来のVuexに代わる新たな標準となりました。PiniaはAPIがシンプルで、TypeScriptとの親和性も高く、Composition APIと自然に統合できる設計になっています。本記事では、Piniaの基本的な使い方と、Vuexとの違いや移行時のポイントを紹介します。

Piniaとは？
Piniaのインストールとセットアップ
基本的なストアの作成方法
ストアの使用方法
Vuexとの主な違い
VuexからPiniaへの移行ポイント
まとめ

Piniaとは？

PiniaはVue.js公式の状態管理ライブラリで、Vuexの後継として位置づけられています。以下のような特徴があります。

ボイラープレートが少なくシンプルな構文
TypeScript対応が容易
Composition APIとの統一的な使い方
Vue DevToolsによる状態確認も可能

Piniaのインストールとセットアップ

まず、Vue CLIまたはViteプロジェクトにPiniaをインストールします。

npm install pinia

次に、main.js（またはmain.ts）でPiniaをVueアプリに登録します。

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

基本的なストアの作成方法

ストアは、PiniaのdefineStore関数を使って定義します。以下はカウンター用ストアの例です。

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

ストアID（例：’counter’）は、開発ツールや永続化プラグインで使われます。

ストアの使用方法

コンポーネント内でストアを使うには、`setup()`関数の中で呼び出します。

<script setup>
import { useCounterStore } from './stores/counter'

const counter = useCounterStore()
</script>

<template>
  <div>
    <p>カウント: {{ counter.count }}</p>
    <button @click="counter.increment">増やす</button>
  </div>
</template>

Vuexとの主な違い

比較項目	Vuex	Pinia
記述スタイル	Options API中心（mutations, actions）	Composition APIベース（actionsのみ）
TypeScript対応	手動型定義が必要	型推論に対応
コード量	ボイラープレートが多い	少なくシンプル