PiniaとVuex：移行する理由
mutations不要、TypeScriptの型推論、devtools対応、よりシンプルなAPI、デフォルトでモジュール化
「PiniaとVuex：移行する理由」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
Pinia が Vuex に取って代わった理由
Pinia は Vue 3 の公式状態管理ライブラリで、Vuex よりも推奨されています。Vuex の優れた部分を残しながら、ボイラープレートや TypeScript と相性の悪かった部分を取り除いています。
ミューテーションは不要
Vuex では、状態を変更する唯一の方法として mutations が必要でした。Pinia ではこれらが完全になくなり、actions が状態を直接変更します。手続きが減り、ファイル数も少なくなりますが、同じように Devtools で追跡できます。
// Vuex: state -> mutation -> action (3 steps)
// Pinia: action mutates state directly (1 step)
actions: {
increment() {
this.count++ // direct, no commit needed
}
}TypeScript の型推論を標準で利用できる
Vuex ではストアの型付けが難しく、複雑なラッパーが必要でした。Pinia は state、getters、actions から型を自動的に推論するため、追加の型付けレイヤーは必要ありません。
const store = useCounterStore()
store.count // inferred as number
store.doubled // inferred from getter
store.increment() // fully typed action設計上モジュール化されている
Vuex では、ネストされた modules を持つ単一のストアを使用し、名前空間の扱いにも悩まされました。Pinia は本質的にモジュール化されています。ストアごとに1ファイルを用意し、それぞれを独自の defineStore で作成します。中央での登録は不要です。
// stores/counter.js
export const useCounterStore = defineStore(...)
// stores/user.js
export const useUserStore = defineStore(...)名前空間は不要
各ストアは独立しており、使用する場所でインポートするため、管理すべきグローバル名前空間はありません。必要なストアをインポートし、関数として呼び出すだけです。
import { useUserStore } from '@/stores/user'
const user = useUserStore()Devtools をサポート
Pinia は Vuex と同じように Vue Devtools と統合できます。ミューテーションを記述しなくても、アクションのタイムライン、状態の検査、タイムトラベルデバッグを利用できます。
バンドルサイズが小さい
Pinia は Vuex よりおよそ1KB 小さく、ツリーシェイキングにも対応しています。インポートしていないストアは最終的なバンドルに含まれません。
よりフラットな API
mapState、mapGetters、mapActions のようなボイラープレートはありません。setup 内でストアのコンポーザブルを呼び出し、返されたオブジェクトを直接使用します。
const counter = useCounterStore()
// access state, getters, and actions on one objectどちらの API にも対応
Pinia は Options API と Composition API の両方をサポートしています。ストアを記述する2つのスタイルはオプションストア（オブジェクト）とセットアップストア（関数）で、このコースの後半で扱います。
Pinia をインストールする
インスタンスを作成してプラグインとして登録することで、アプリに Pinia を追加します。以降は、どのコンポーネントからでも任意のストアを使用できます。
import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(createPinia()).mount('#app')Pinia を使うタイミング
多くのコンポーネント間で状態を共有する必要がある場合、ルート変更後も状態を維持したい場合、または Devtools で状態を検査したい場合は Pinia を使用します。1つのコンポーネント内だけで使う状態なら、通常の ref のほうが簡単です。
クイックチェック
Pinia が Vuex に取って代わった理由を理解できているか確認しましょう。
まとめ
Pinia は Vue 3 の状態管理における現代的な選択肢です。
- ミューテーションは不要で、actions が状態を直接変更します。
- TypeScript の型推論が自動的に行われ、ラッパーは不要です。
- モジュール化されており、ファイルごとに1つのストアを用意し、名前空間も不要です。
- Devtools を完全にサポートし、バンドルサイズも約1KB 小さくなります。
よくある質問
「PiniaとVuex：移行する理由」レッスンは無料ですか？
はい。「PiniaとVuex：移行する理由」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「PiniaとVuex：移行する理由」で何を学びますか？
mutations不要、TypeScriptの型推論、devtools対応、よりシンプルなAPI、デフォルトでモジュール化 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「PiniaとVuex：移行する理由」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。