【Vue.js】Piniaには2種類の書き方がある

Vue.jsの状態管理ライブラリ、Piniaの学習をしていて

記事によって書き方が違うと感じたので、調査してみました。

すると、Piniaには2種類の書き方があることを知りました。

今回はPiniaの2種類の書き方について紹介していきたいと思います。

Piniaの2種類の書き方

Option Stores

1つ目の書き方はOption Storesという書き方です。

こちらはVue2で使われているOptions APIに似たような書き方です。

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

state, getters, actionsをオブジェクトで定義します。

メリット

• Vue2にも馴染みがあり、Vuexと似た構造。
• シンプルでわかりやすく、初心者向き。
• 型補完（TypeScript）も比較的しっかり効く。
• 公式ドキュメントでも例が多い。

デメリット

• 複雑なロジックの再利用や外部関数の組み込みがしづらい。
• Composition APIとの統一感が薄れる。

Setup Stores

2つ目の書き方はSetup Storesという書き方です。

こちらはVue3で使われているComposition APIに似た書き方です。

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const double = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, double, increment }
})

countがstate、doubleがgetters、incrementがaction

を表します。

Setup Storesで書く場合は全てreturn 返すオブジェクトの中に含めないといけない点に注意!

メリット

• Composition APIと完全に統一感あり
• ref, reactive, computed, watchなど、Vueの機能を自由に使える。
• 外部Composableの再利用がしやすい。
• テストしやすく、スケーラブルな設計に向いている。
• 複雑な状態管理（フォームや非同期ロジックなど）と相性が良い。

デメリット

• 書き方に慣れるまで少し難しい。
• Option Storeより冗長に感じることがある。

どちらを使うと良いか

Vue3がComposition APIをサポートしているので

Setup Storesを使う方が良い。