Vueの状態管理ライブラリPiniaを使う

Piniaとは

ざっくり要約

• Vueのストアライブラリで、コンポーネント/ページ間で状態を共有することができる
• Vuexよりシンプルで使いやすいことを目的として作られた（Vuexとの違いはページ下部参照）
• TypeScriptファースト

前提

• node
• npm
• vue > 2.7 (vueの2.7以下を使用している場合、composition APIのインストールが別途必要です。)

Set Up

piniaのインストール

npm install pinia

piniaのinstance作成

import { createPinia } from "pinia";

// Init App
createApp(App)
  .use(createPinia())
  .mount("#app");

storeを定義

import { defineStore } from 'pinia'
import products from '@/data/products.json'

// unique across project
export const useProductStore = defineStore('productStore', {
    state: () => {
        return {
            products: [],
        }
    },
  
    // getters: {},

    // actions: {},
});

storeを使用

App.vue

<script setup>
import { useProductStore } from "./store/productStore";
const productStore = useProductStore()
</script>

<tmplate>
    <ul>
      <li
        v-for="product in productStore.products"
        :key="product.name"
        :product="product"
      />
    </ul>
</template>

actions,gettersを定義

import { defineStore } from 'pinia'
import products from '@/data/products.json'

// unique across project
export const useProductStore = defineStore('productStore', {
    state: () => {
        return {
           products: [],
        }
    },
  
   actions: {
        async fill() {
            this.products = (await import('@/data/products.json')).default
        }
    },

    getters: {
        count: (state) => state.products.length,
        isEmpty: (state) => state.count === 0
    },
});

actions, gettersを使用

<script setup>
import { useProductStore } from "./store/productStore";
const productStore = useProductStore()
productStore.fill()
</script>

<tmplate>
    Product数: {{ productStore.count }}
    <ul  v-if="!productStore.isEmpty">
      <li
        v-for="product in productStore.products"
        :key="product.name"
        :product="product"
      />
    </ul>
</template>

vuexとの違い

・変更（mutations）はもう存在しません。それらはしばしば非常に冗長だと見なされていました。彼らは最初に開発者ツールの統合をもたらしましたが、それはもう問題ではありません。
・TypeScriptをサポートするためのカスタム複雑なラッパーを作成する必要はありません、すべてがタイプされており、APIはできるだけTSタイプ推論を活用するように設計されています。
・インジェクトする魔法の文字列はもうありません、関数をインポートし、呼び出し、オートコンプリートを楽しんでください！
・ストアを動的に追加する必要はありません、デフォルトですべてが動的で、あなたはそれをすら気づきません。ただし、手動でストアを使用して、いつでも登録することもできますが、自動的になっているため、それについて心配する必要はありません。
・モジュールのネスト構造はもうありません。ストアを他のストアの中にインポートして使用することで、まだ暗黙的にネストすることはできますが、Piniaは設計上フラットな構造を提供しながら、ストア間のクロス組合の方法も提供します。ストア間の循環依存関係も持つことができます。
・名前空間モジュールはありません。ストアのフラットなアーキテクチャに対して、「名前空間」はそれらが定義される方法に固有であり、すべてのストアが名前空間化されていると言えるでしょう。

公式サイトより引用（原文和訳）