【Vue】Piniaとは？

JavaScript
2023.05.25

こんにちは、かつコーチです。

Vuejsでの状態管理はVuexが主流でしたが、Vuejsがバージョン3になってから、Piniaが登場しました。

今回は、そのPiniaについて解説します。

Piniaとは？

PiniaはVue.jsの状態管理ライブラリであり、Vue 3の公式状態管理ツールとして推奨されています。

以前はVuexが広く使われていましたが、PiniaはVuexよりも軽量で使いやすく、

Vue 3の機能とシームレスに統合されています。

Piniaは、状態をグローバルに管理し、

複数のコンポーネント間でデータを共有・管理するのに役立ちます。

Piniaの特徴

  1. シンプルなAPI:
    • Piniaは直感的でシンプルなAPIを提供しており、Vuexのように複雑な設定やボイラープレートコードが少ないです。
  2. モジュール化が容易:
    • Piniaでは各状態管理を「ストア（store）」として定義し、これをモジュールのように扱えます。複数のストアを作成し、それぞれを分割して管理できるため、スケーラブルなアプリケーションを簡単に構築できます。
  3. TypeScriptに優しい:
    • TypeScriptとの相性が良く、型安全に状態を管理できるよう設計されています。
  4. リアクティブ性:
    • Vue 3のリアクティブシステムをベースにしているため、状態が自動的にリアクティブになります。refやcomputedを用いて状態や計算プロパティを簡単に定義できます。
  5. プラグインシステム:
    • Piniaはプラグインをサポートしており、拡張性が高く、カスタムロジックを追加できます。

Piniaの基本的な使い方

Piniaを使用するためには、まずプロジェクトにインストールして設定する必要があります。

1. インストール

npm install pinia

2. Piniaの設定

Piniaはアプリ全体に対して1つのインスタンスを作成し、

それをVueアプリケーションに渡すことで使用できます。

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

const app = createApp(App);

// Piniaのインスタンスを作成
const pinia = createPinia();

// VueアプリにPiniaを登録
app.use(pinia);

app.mount('#app');

3. ストアの定義

Piniaでは各ストアが状態管理の単位となります。ストアはdefineStore関数を使って定義します。

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});
  • state: ストアが保持するデータ（状態）を定義する。
  • actions: 状態を変更するためのメソッド（mutationsの代わり）。
  • getters: 状態を基に計算されるプロパティ（computedと同じような役割）。

4. ストアの使用

ストアは、Vueコンポーネント内でインポートして使用します。

useCounterStoreのようにストアを呼び出し、状態やアクションにアクセスします。

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

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

export default {
  setup() {
    // ストアのインスタンスを取得
    const counterStore = useCounterStore();

    return { counterStore };
  },
};
</script>

5. Reactivity

Piniaの状態はリアクティブであるため、状態が変わると自動的にコンポーネントが再描画されます。

これはVue 3のrefやreactiveを使用して状態を追跡するためです。

Piniaの機能詳細

1. Actions（アクション）:

  • actionsは、状態を変更するメソッドです。Piniaでは、状態を直接変更でき、Vuexのようにmutationsを定義する必要がありません。非同期処理や複雑なロジックも簡単に書けます。

2. Getters（ゲッター）:

  • gettersは、ストアの状態を基に新しい値を計算するためのメソッドです。Vueのcomputedプロパティに似ています。キャッシュされているため、依存している状態が変更されたときだけ再計算されます。

3. モジュール分割:

  • Piniaでは、各ストアが独立したモジュールのように扱えるため、アプリケーションの状態を分割して整理するのが簡単です。たとえば、ユーザーの情報を管理するストアや、商品情報を管理するストアなどを個別に定義できます。

Vuexとの違い

  • シンプルさ: Vuexではmutationsやactionsを使い分ける必要がありますが、Piniaではactionsで直接状態を変更できます。
  • モジュール化: Vuexはモジュールの設定がやや複雑ですが、Piniaは各ストアが独立しているため、設定が簡単です。
  • TypeScriptのサポート: PiniaはTypeScriptに対してより優れたサポートを提供しており、型の推論が自然に行われます。

まとめ

PiniaはVue.jsの状態管理において非常に強力かつシンプルなツールで、

特にVue 3との相性が良いです。

Vuexの代替として公式に推奨されており、軽量でありながら、

状態管理の必要な要件をすべて満たす機能を提供します。

タイトルとURLをコピーしました