【Vue3】Piniaを使用して状態管理を実現する方法

yarn add pinia
# or with npm
npm install pinia

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'
import { createPinia } from 'pinia' // ←追加


const pinia = createPinia() // ←追加

loadFonts()

createApp(App)
  .use(router)
  .use(vuetify)
  .use(pinia) // ←追加
  .mount('#app')

import { defineStore } from 'pinia'

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

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

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

  return { count, name, doubleCount, increment }
})

<template>
  <v-container>
    <v-card>{{ count }}</v-card>
    <v-card>{{ doubleCount }}</v-card>
    <v-btn @click="increment"> + </v-btn>
  </v-container>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useCounterStore } from '@/stores/counterStore'
import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    /**
     * ストアは、use...Store()がコンポーネント内で呼び出されるまで作成されない。
     * setup()内で実行する必要がある
     *
     * ストアがインスタンス化されると、state、getters、
     * およびactionsで定義された任意のプロパティに直接アクセスできるようになる。
     */
    const store = useCounterStore()
    /**
     * ストアのリアクティビティを保持しながら、ストアからプロパティを抽出するためには、
     * storeToRefs()を使用する必要がある。
     *
     * 注意: storeToRefsはストアのstate, gettersのみに適用するため、actionsは呼び出さない
     */
    const { count, doubleCount } = storeToRefs(store)
    /**
     * actionsを呼び出す場合は、純粋にストアから分割代入する
     */
    const { increment } = store

    return {
      count,
      doubleCount,
      increment
    }
  }
})
</script>

import { UserDocument } from '@/document/UserDocument'

export const useUsersStore = defineStore('users-store', {
  state: () => ({
    userList: [] as UserDocument[]
  }),
})

const store = useCounterStore()
store.$reset()

const store = useCounterStore()
store.$patch({
  count: 5,
  name: 'Peter'
})

const store = useCounterStore()
store.$subscribe((mutation, state) => {
  /**
   * 'direct' | 'patch object' | 'patch function'
   */
  console.log('mutation.type', mutation.type)
  /**
   * defineStoreの第二引数の値
   */
  console.log('mutation.storeId', mutation.storeId)
  /**
   * 以下のような出力となる
   * keyでどの値が変更されたかを検出できる
   * {
      key: "count",
      newValue: 1,
      oldTarget: undefined,
      oldValue: 0,
      target: {coun: 1, name: 'James'},
      type: "set",
      }
   */
  console.log('mutation.events', mutation.events)
  /**
   * ストアのStateの状態
   */
  console.log('state', state)
})

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter-store', {
  state: () => ({
    count: 0,
  }),
  getters: {
    // gettersに引数を渡す
    doubleCount: (state) => {
      return (num: number) => state.count * num
    }
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

import { defineStore } from 'pinia'
// UserDocumentは取得するユーザー情報の型定義
import { UserDocument } from '@/document/UserDocument'
// APIアクセスのComposition Function
import useAPI from '@/hooks/useAPI'

export const useUsersStore = defineStore('users-store', {
  state: () => ({
    // ユーザー情報の一覧を格納する
    userList: [] as UserDocument[]
  }),
  getters: {
    // 配列をオブジェクトに加工する。対象のユーザーを取得する際にfindなどのループ処理を行うよりも処理速度が上がる
    usersMap: (state): Record<number, UserDocument> =>
      state.userList.reduce(
        (acc, userDoc) => {
          if (userDoc.id) {
            acc[userDoc.id] = userDoc
          }
          return acc
        },
        {} as Record<number, UserDocument>
      )
  },
  actions: {
    // ユーザー情報を取得する
    async fetchUsers() {
      const { data, get } = useAPI<UserDocument>()
      const url = 'https://jsonplaceholder.typicode.com/users'
      await get(url)
      this.userList = data.value
    },
    // idを指定して対象のユーザーを取得する
    getTargetUser(id: number) {
      return this.usersMap[id]
    }
  }
})