【Vue.js】Piniaを使った状態管理の始め方｜Vuexとの違いと移行ガイド

# 新しく始めるなら：npm create vue@latest の対話で「Pinia」を選ぶと、最初から組み込まれる
npm create vue@latest

# 既存のプロジェクトに追加する場合
npm install pinia

// src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

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

// stores/counter.js（Option Store：state / getters / actions のオブジェクトで書く）
import { defineStore } from 'pinia'

// 第1引数は、アプリ全体で一意なストアの id。devtools とも結びつく
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount: (state) => state.count * 2        // 算出プロパティに相当
  },
  actions: {
    increment() {
      this.count++                                 // mutations は無く、直接変更できる
    }
  }
})

// stores/counter.js（Setup Store：関数で書く）
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)                              // ref() → state
  const doubleCount = computed(() => count.value * 2)   // computed() → getters
  function increment() {                            // 関数 → actions
    count.value++
  }

  return { count, doubleCount, increment }          // 公開するものを return する
})

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

// ストアは、この useXxxStore() を呼んだときに作られる
const counter = useCounterStore()
</script>

<template>
  <p>カウント: {{ counter.count }}（2倍: {{ counter.doubleCount }}）</p>
  <button type="button" @click="counter.increment()">増やす</button>
</template>

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

const counter = useCounterStore()

// NG：そのまま分割代入すると、リアクティブな接続が切れる
// const { count, doubleCount } = counter

// OK：state と getters は storeToRefs で ref のまとまりにしてから分割代入する
const { count, doubleCount } = storeToRefs(counter)

// actions は、そのまま分割代入してよい
const { increment } = counter
</script>

// Vuex のモジュール（Before）
export default {
  namespaced: true,
  state: { count: 0 },
  getters: { double: (state) => state.count * 2 },
  mutations: { INCREMENT(state) { state.count++ } },
  actions: { increment({ commit }) { commit('INCREMENT') } }
}

// Pinia のストア（After）
// ・モジュール → ストア。id が、名前空間の代わりになる
// ・mutations は無い → actions にまとめる（context 引数も不要）
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { double: (state) => state.count * 2 },
  actions: {
    increment() {
      this.count++
    }
  }
})