Piniaとは？

Piniaは、Vue.jsのための状態管理ライブラリです。

Vuexから派生し、Vue.jsの公式ツールチェインに取り込まれた新しいバージョンの状態管理ツールとして開発されました。

Piniaは、シンプルなAPI、型の安全性、軽量性、柔軟性を特徴としています。

なぜPiniaを使うべきなのか？

Piniaを使うメリットはいくつかあります。

見た目がスッキリ
Piniaを使うことで、状態管理に関するコードの記述量が減ります。特に、Vuexのような「store.commit("mutation名", 値)」といった冗長な記述が不要になります。
型の安全性が高い
PiniaはTypeScriptに完全に対応しており、型推論が機能します。変な値を入れようとするとエラーが出るため、開発者は安心して開発に取り組むことができます。
分割が容易
Piniaでは、ストアを複数作成することができます。これにより、目的に応じたストアの作成や管理が容易になります。

Piniaの使い方

Piniaの使い方はとてもシンプルです。

まずはストアの定義をします。

Javascriptimport { defineStore } from "pinia"

export const useStore = defineStore("counter", {
  state: () => ({
    count: 0,
  }),
  getters: {
    tenfold() {
      return this.count * 10
    },
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

上記のコードでは、ストアの定義が行われています。

defineStore関数を使用し、必要な状態やゲッター、アクションを定義します。

次に、コンポーネントでストアを使用する方法を見てみましょう。

HTML<script setup lang="ts">
import { useStore } from "@/store/store"

const store = useStore()

// stateの参照
console.log(store.counter) // 0

// stateの変更
store.counter = 10
console.log(store.counter) // 10

// gettersの使用
console.log(store.tenfold) // 100
</script>