MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Vue
  4. [Vue] Piniaについて知ろう

[Vue] Piniaについて知ろう

Vue

Vue 3の状態管理ライブラリーであるPiniaについて、使用方法を解説します。

目次

Piniaとは

Piniaは、Vue 3向けの状態管理ライブラリーで、Vuexのような機能を提供します。Vue 3で新しく追加されたComposition APIを使用することで、より直感的で柔軟な状態管理が可能になっています。Piniaは、Vuexよりもシンプルでパフォーマンスが良く、よりComposition APIに適した設計になっています。

インストール

まず、Piniaをインストールする必要があります。以下のコマンドを実行して、必要なパッケージをインストールします。

npm install pinia

ストアの作成

ストアを作成するには、defineStore関数を使用します。以下は、counterストアの例です。

import { defineStore } from 'pinia'

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

idプロパティは、ストアの名前を識別するために使用されます。stateプロパティは、ストアの初期状態を定義します。actionsプロパティは、ストア内で実行できる関数を定義します。ここでは、increment関数を定義して、countステートを増やすことができます。

ストアの使用

ストアを使用するには、useStore関数を使用します。以下は、Homeコンポーネントでcounterストアを使用する例です。

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

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

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

    function increment() {
      counter.increment()
    }

    return {
      counter,
      increment
    }
  }
}
</script>

useCounterStore関数を使用して、counterストアを取得します。取得したストアを使用するには、関数やプロパティにアクセスするだけです。ここでは、increment関数を呼び出して、countステートを増やすことができます。

ストアの状態の変更の監視

ストアの状態が変更されたときに、コンポーネントで自動的に再レンダリングするには、watch関数を使用します。以下は、Counterコンポーネントでcountステートを監視する例です。

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

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

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

    watch(() => counter.count, (count) => {
      console.log(`Count changed to ${count}`)
    })

    function increment() {
      counter.increment()
    }

    return {
      counter,
      increment
    }
  }
}
</script>

watch関数を使用して、counter.countを監視し、変更があるたびにコールバック関数が実行されます。ここでは、コンソールにメッセージを出力しています。

モジュール化

Piniaは、モジュール化されたストアの作成もサポートしています。これにより、大規模なアプリケーションで複数のストアを作成することができます。以下は、modulesディレクトリ内にあるcart.jsモジュールの例です。

import { defineStore } from 'pinia'

export const useCartStore = defineStore({
  id: 'cart',
  state: () => ({
    items: []
  }),
  actions: {
    addItem(item) {
      this.items.push(item)
    },
    removeItem(item) {
      const index = this.items.indexOf(item)
      if (index !== -1) {
        this.items.splice(index, 1)
      }
    }
  }
})

モジュールの使用

モジュールを使用するには、useStore関数の引数にモジュール名を指定します。以下は、Cartコンポーネントでcartモジュールを使用する例です。

<template>
  <div>
    <ul>
      <li v-for="item in cart.items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
import { useStore } from 'pinia'
import { useCartStore } from '@/stores/modules/cart'

export default {
  setup() {
    const cart = useStore('cart')
    const cartStore = useCartStore()

    function addItem() {
      cartStore.addItem({ id: 1, name: 'Product' })
    }

    return {
      cart,
      addItem
    }
  }
}
</script>

useStore関数の引数にモジュール名を指定することで、指定したモジュールを取得することができます。useCartStore関数を使用して、モジュールの操作に必要な関数を定義し、コンポーネント内で使用することができます。

以上が、Piniaの基本的な使い方になります。Composition APIを使用して、直感的で柔軟な状態管理が可能になっています。また、モジュール化されたストアの作成により、大規模なアプリケーションでの状態管理が容易になるため、PiniaはVue.jsアプリケーションでの使用をお勧めします。また、Typescriptにも完全に対応しているため、型安全性も保証されます。

Vue
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次