Vue Academy · レッスン

defineStore：State、Getters、Actions

Options storeとSetup store、関数としてのstate、computed getter、非同期action

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

ストアの3つの柱

オプションストアには3つの要素があります。state（データ）、getters（派生値）、actions（状態を変更するメソッド）です。3つすべてを defineStore の中で定義します。

ストアを定義する

defineStore は一意の id 文字列とオプションオブジェクトを受け取ります。コンポーザブルを返し、慣例として useXxxStore という名前を付けます。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // state, getters, actions go here
})

State は関数

state オプションはオブジェクトを返す関数でなければなりません。これにより、コンポーネントの data() と同じように、各ストアインスタンスが新しい state を取得できます。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0, name: 'Coddy' })
})

State を読み取る

setup 内でストアのコンポーザブルを呼び出してインスタンスを取得し、state のプロパティを直接読み取ります。これらはリアクティブです。

const counter = useCounterStore()
console.log(counter.count) // 0

Getters は算出値

getters は computed プロパティに似ています。それぞれが最初の引数として state を受け取り、派生値を返します。値はキャッシュされます。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 2 }),
  getters: {
    doubled: (s) => s.count * 2
  }
})

Getter を使用する

getter はプロパティとしてアクセスするため、括弧は必要ありません。Pinia は依存関係が変化したときだけ再計算します。

const counter = useCounterStore()
console.log(counter.doubled) // 4

他の Getter を参照する

別の getter を使用するには、state パラメーターの代わりに this を参照します。this を使う場合は、アロー関数を使用しないでください。

getters: {
  doubled: (s) => s.count * 2,
  quadrupled() {
    return this.doubled * 2
  }
}

Actions が状態を変更する

actions はメソッドです。this を使って状態を直接読み取り、変更します。commit も dispatch も必要なく、メソッドを呼び出すだけです。

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() { this.count++ },
    addBy(amount) { this.count += amount }
  }
})

非同期 Actions

Actions は async にできます。API 呼び出しはここで行います。データを取得し、その結果を state に代入します。

actions: {
  async loadUser(id) {
    const res = await fetch('/api/users/' + id)
    this.user = await res.json()
  }
}

コンポーネントでストアを使用する

コンポーザブルをインポートし、<script setup> で呼び出して、テンプレート内で state、getters、actions を使用します。

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
</script>

<template>
  <p>{{ counter.count }} -> {{ counter.doubled }}</p>
  <button @click="counter.increment()">+</button>
</template>

複数のフィールドにパッチを適用する

複数の state フィールドを一度に変更するには、$patch を使用します。変更が1つの Devtools エントリにまとめられます。

counter.$patch({ count: 10, name: 'New' })

クイックチェック

オプションストアの構造に関する知識を確認しましょう。

まとめ

オプションストアには3つの要素があります。

state：データオブジェクトを返す関数です。
getters：キャッシュされる派生値で、state を受け取ります（または this を使用します）。
actions：this を介して state を直接変更するメソッドです。

ストアを使用するには、setup 内でそのコンポーザブルを呼び出します。

よくある質問

「defineStore：State、Getters、Actions」レッスンは無料ですか？

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

「defineStore：State、Getters、Actions」で何を学びますか？

Options storeとSetup store、関数としてのstate、computed getter、非同期action ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「defineStore：State、Getters、Actions」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Vue Academyに戻る