Vue.js 3での状態管理: Vuexの進化とPiniaの活用法

作成日 2024.12.20
Vue.js
Vue.js

Vue.js 3では、状態管理のためにVuexが進化を遂げ、さらに軽量で使いやすいPiniaが登場しました。本記事では、VuexとPiniaの特徴、使用方法、そして適切な使い分けについて詳細に解説します。

1. Vuexとは何か
2. Vuex 4での改良点
3. Piniaとは何か
4. Piniaの導入方法
5. Piniaの基本的な使い方
6. PiniaとVuexの違い
7. Piniaのモジュール化
8. Vue Routerとの統合
9. Piniaでの非同期処理
10. Vue DevToolsでのPiniaのサポート
11. Piniaを用いた状態の永続化
12. VuexからPiniaへの移行ガイド
13. まとめ

Vuexとは何か

VuexはVue.js公式の状態管理ライブラリで、アプリ全体の状態を一元管理するために使用されます。特徴的な要素として、ストア、ゲッター、ミューテーション、アクションがあります。

import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    asyncIncrement({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

export default store;

Vuex 4での改良点

Vuex 4では、Vue 3との互換性を確保しつつ、従来のAPIが維持されています。

Piniaとは何か

PiniaはVue.js 3に最適化された新しい状態管理ライブラリです。Vuexと比較して軽量で直感的なAPIを提供します。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    asyncIncrement() {
      setTimeout(() => {
        this.increment();
      }, 1000);
    },
  },
  getters: {
    doubleCount: (state) => state.count * 2,
  },
});

Piniaの導入方法

Piniaをプロジェクトに追加するには、以下のコマンドを使用します。

npm install pinia

その後、VueアプリケーションにPiniaを登録します。

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

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

Piniaの基本的な使い方

Piniaストアを定義してコンポーネントで使用します。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const counterStore = useCounterStore();

    return {
      count: counterStore.count,
      increment: counterStore.increment,
    };
  },
};
</script>

PiniaとVuexの違い

PiniaはVuexと比較して以下の特徴を持っています：

ミューテーションが不要
TypeScriptサポートが容易
直感的なAPI設計

Piniaのモジュール化

Piniaではモジュール化が簡単に行えます。各ストアを独立したモジュールとして定義できます。

Vue Routerとの統合

PiniaをVue Routerと組み合わせて使用する例です。

import { useRouter } from 'vue-router';

export const useNavigationStore = defineStore('navigation', {
  actions: {
    goTo(route) {
      const router = useRouter();
      router.push(route);
    },
  },
});