vuejs-ai/vue-pinia-best-practices

vue-pinia-best-practices は何をしますか？

Piniaストア、状態管理パターン、ストアのセットアップ、およびストアを使ったリアクティビティ。

はじめに

Pinia は Vue.js アプリケーション向けの直感的で型安全な状態管理ライブラリです。このスキルでは、プロジェクトで Pinia を最大限に活用するためのベストプラクティスを解説します。

ストアの定義

Pinia では、defineStore 関数を使ってストアを定義します。ストアの名前は一意である必要があります。

import { defineStore } from 'pinia'

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

Composition API での使用

Vue 3 の Composition API と組み合わせることで、より柔軟なストア設計が可能です。

import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useSetupStore = defineStore('setup', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

状態のリアクティビティ

Pinia は Vue のリアクティブシステムと完全に統合されているため、状態の変更は自動的に検出され、UI が更新されます。

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

const store = useCounterStore()
</script>

<template>
  <div>
    <p>{{ store.count }}</p>
    <button @click="store.increment()">+
  </div>
</template>

型安全性

TypeScript との統合により、IDE での補完や型チェックが有効になります。defineStore のジェネリクスを使用して型を明示することもできます。

interface CounterState {
  count: number
  name: string
}

export const useCounterStore = defineStore<string, CounterState>('counter', {
  state: () => ({
    count: 0,
    name: 'counter',
  }),
})

まとめ

Pinia は Vue 3 プロジェクトにおいて、シンプルかつ強力な状態管理を実現します。このスキルを活用して、効率的でメンテナブルなコードを書きましょう。