Frontend Academy · レッスン

Vue の Pinia：defineStore と storeToRefs

defineStore で Pinia ストアを定義し、コンポーネントからアクセスし、state を分割代入してもリアクティビティを維持できるよう storeToRefs を使います。

「Vue の Pinia：defineStore と storeToRefs」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Pinia とは

Pinia は Vue 3 の公式 state 管理ライブラリです。Vuex に代わるもので、Composition API のように扱える、よりシンプルで型安全な、DevTools と統合された API を提供します。

Pinia のインストール

Pinia プラグインをインストールして、Vue アプリに登録します。

npm install pinia

// main.ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

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

defineStore — Composition API スタイル

defineStore は store を作成します。Composition API スタイルでは、composable と同じように ref、computed、関数を直接使用します。

// stores/counter.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

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

defineStore — Options スタイル

Options スタイルは Vue の Options API に対応しています。リアクティブなデータには state()、computed のような getters、methods のような actions を使用します。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubled: (state) => state.count * 2,
  },
  actions: {
    increment() { this.count++; },
    async fetchAndSet(id: string) {
      this.count = await fetchCount(id);
    }
  }
});

コンポーネントでの Store の使用

setup() 内で store のフックを呼び出します。store はリアクティブなオブジェクトなので、state の読み取りや actions の呼び出しを直接行えます。

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

const store = useCounterStore();
</script>

<template>
  <p>{{ store.count }}</p>
  <button @click="store.increment">+</button>
</template>

storeToRefs — 安全な分割代入

store を直接分割代入すると、state と getters のリアクティビティが失われ、通常の値になります。リアクティブに分割代入するには storeToRefs() を使用します。

import { storeToRefs } from 'pinia';

const store = useCounterStore();

// Actions can be destructured normally (they're functions):
const { increment } = store;

// State and getters need storeToRefs:
const { count, doubled } = storeToRefs(store);

$patch — 更新の一括適用

store.$patch() は、複数の state の変更を 1 つの操作として適用します。関連する更新をまとめる場合に便利です。

store.$patch({
  count: 10,
  name: 'Updated'
});

// Or with a function for complex logic:
store.$patch(state => {
  state.items.push(newItem);
  state.total += newItem.price;
});

$subscribe — Store の変更を監視

store.$subscribe(callback) は、Vue の watch と同様に、store 全体のあらゆる mutation に反応します。

Pinia プラグイン

Pinia プラグインはすべての store を拡張します。一般的な用途は、state の localStorage への保存、デバッグログの追加、サービスの注入です。

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

Pinia DevTools

PiniaはVue DevToolsと統合されています。ストアの状態を確認したり、どのアクションが呼び出されたかを確認したり、状態のスナップショット間をタイムトラベルしたりできます。

複数のストア

ドメインごとに1つのストアを作成します（useAuthStore、useCartStore、useNotificationStore）。ストアから別のストアをインポートして使用できます。Piniaはフラットな構造で、ネストしたモジュールがないため、これを簡単に実現できます。

クイックチェック

Piniaストアを分割代入するとき、なぜstoreToRefs()を使用する必要がありますか？

まとめ：Pinia

defineStoreでストアを作成します。Composition APIスタイルまたはOptions APIスタイルを使用できます。useXxxStore()フックでアクセスします。リアクティブな分割代入にはstoreToRefs()を使用します。まとめて更新するには$patch()を使用します。永続化やその他の拡張にはプラグインを使用します。DevToolsと統合できます。ドメインごとに1つのストアを作成し、Vuexのようなネストしたモジュールは使用しません。

よくある質問

「Vue の Pinia：defineStore と storeToRefs」レッスンは無料ですか？

はい。「Vue の Pinia：defineStore と storeToRefs」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「Vue の Pinia：defineStore と storeToRefs」で何を学びますか？

defineStore で Pinia ストアを定義し、コンポーネントからアクセスし、state を分割代入してもリアクティビティを維持できるよう storeToRefs を使います。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「Vue の Pinia：defineStore と storeToRefs」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

Redux Toolkit：createSlice と configureStore
軽量な React 状態管理のための Zustand
Vue の Pinia：defineStore と storeToRefs
グローバル状態とローカル状態の使い分け

← Frontend Academyに戻る