Piniaを使用して状態管理を行う

Piniaとは

Piniaは、Vue.jsのための状態管理ライブラリーです。Vue.jsの公式ドキュメントで推奨されているVuexとは異なり、PiniaはVue.js 3のComposition APIに基づいています。Composition APIは、Vue.jsのデータとロジックを組み合わせる新しい方法を提供するAPIです。Piniaは、Composition APIを使用して、アプリケーションの状態を管理するためのより直感的で柔軟な方法を提供します。

Piniaは、Vue.jsアプリケーションのステート管理に役立ちます。アプリケーションの状態を保存し、コンポーネント間で共有することができます。Piniaは、Vuexと同様に、アプリケーションのステートをリアクティブに追跡し、変更された場合に自動的に再レンダリングします。

Piniaの主な特徴

以下は、Piniaの主な特徴です。

Composition APIを使用して実装されているため、Vue.js 3に最適化されています。軽量で、動作が高速であるため、大規模なアプリケーションでもパフォーマンスが向上します。 TypeScriptに完全に対応しており、型安全なステート管理が可能です。 Vuexと同様に、モジュールを使用してアプリケーションのステートを構造化し、複数のコンポーネントで共有できます。 Vue.js Devtoolsと統合されており、アプリケーションのステートを簡単にデバッグできます。

Piniaの使い方

Piniaを使用するには、まず@pinia/coreパッケージをインストールする必要があります。次に、Piniaインスタンスを作成し、Vueアプリケーションに登録する必要があります。以下は、簡単な例です。

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

const pinia = createPinia()

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

ここでは、createPinia関数を使用してPiniaインスタンスを作成し、createApp関数を使用してVueアプリケーションを作成しています。その後、作成したPiniaインスタンスをVueアプリケーションに登録しています。

Piniaを使用するには、ステートを定義し、モジュールとして登録する必要があります。以下は、簡単な例です。

import { defineStore } from '@pinia/core'

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

ここでは、defineStore関数を使用して、useCounterStoreというカスタムフックを定義しています。idプロパティは、モジュールの一意のIDを指定するために使用されます。stateプロパティは、ステートを定義するために使用されます。actionsプロパティは、モジュールのアクションを定義するために使用されます。

このように、定義されたステートやアクションは、コンポーネントからuseStoreフックを使用して呼び出すことができます。以下は、簡単な例です。

import { useCounterStore } from './counter'

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

    const increment = () => {
      counterStore.increment()
    }

    const decrement = () => {
      counterStore.decrement()
    }

    return {
      count: counterStore.count,
      increment,
      decrement
    }
  }
}

ここでは、useCounterStoreフックを使用して、counterStoreを取得しています。それから、incrementとdecrement関数を定義し、それぞれcounterStore.increment()とcounterStore.decrement()を呼び出しています。最後に、count、increment、decrementをオブジェクトとして返しています。

これで、コンポーネントからPiniaを使用して、アプリケーションのステートを管理することができます。

まとめ

Piniaは、Vue.js 3のComposition APIに基づいた状態管理ライブラリーであり、Vuexよりも直感的で柔軟な方法でアプリケーションのステートを管理することができます。また、TypeScriptに完全に対応しており、型安全なステート管理が可能です。Piniaを使用するには、Piniaインスタンスを作成し、ステートを定義してモジュールとして登録する必要があります。コンポーネントからは、useStoreフックを使用してステートを呼び出すことができます。

TOC

Piniaとは

Piniaの主な特徴

Piniaの使い方

まとめ