Setupで🍍Pinia.jsを使う

0.🍍 初めに

• この記事はVue.js 3を使うプロジェクトに基づいて作成しました。

1.🍍 インストール

まずはインストールです。
公式サイト

yarn add pinia
# or with npm
npm install pinia

2.🍍 インポート

main.jsまたはmain.tsで🍍をインポートします。

import { createPinia } from 'pinia'

app.use(createPinia())

3.🍍 Storeを作成

まずはsrcフォルダでstoreフォルダを新規作成、
index.tsまたはindex.jsファイルを新規作成、この記事はtsを使っています。
storeで二つのパターン（Options APIとComposition API）があります、この記事はもちろんComposition APIパターンのstoreを作ります。

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


export const useMainStore = defineStore('main', () => {
  // script setupの感じでstoreを書く
  // 値
  const count = ref<number>(1)
  // メソッド
  const increment = ():void => {
    count.value++
  }

  return { count, increment }
})

4.🍍 Storeを使う

App.vueで使う

<template>
  <div>
    count: {{ count }}
    <button @click="increment()">increment</button>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from '@/store/index'

// hooksの感じで使う
const useMainStore = useMainStore()
const { count, increment } = storeToRefs(useMainStore)

// vueファイルで直接的に値を更新することもできます
count.value = 0
</script>

5.🍍 感想

Vue3に対して、Options APIよりやはり🍍Composition APIのほうが使いやすいと思います。