ストアの組み合わせとストア間アクセス
あるストアから別のストアを使う方法、ストア合成のパターン、循環依存の回避
「ストアの組み合わせとストア間アクセス」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
ストアは他のストアを使用できる
実際のアプリには、互いに依存する複数のストアがあります。たとえばカートストアが、現在のユーザーを知るために認証ストアを必要とする場合があります。Pinia ではストア間のアクセスを簡単に行えます。
Action 内でストアを呼び出す
Action 内で、別のストアのコンポーザブルを呼び出すだけです。Actions は Pinia が有効になった後に実行されるため、安全に使用できます。
import { useAuthStore } from './auth'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
checkout() {
const auth = useAuthStore()
if (!auth.isLoggedIn) return
// proceed with auth.userId
}
}
})Setup ストアの構文
オプションオブジェクトに加えて、defineStore はセットアップ関数も受け取れます。コンポーネントの setup と同じように、ref や computed を宣言してから返します。
import { ref, computed } from 'vue'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
return { count }
})Ref としての State
セットアップストアでは、返したすべての ref または reactive がstateになります。プリミティブには ref を、オブジェクトには reactive を使用します。
export const useUserStore = defineStore('user', () => {
const name = ref('Coddy')
const profile = reactive({ age: 30 })
return { name, profile }
})Computed としての Getter
返された computed はgetter として機能します。オプションストアの getter と同じように、キャッシュされ、リアクティブです。
export const useCounterStore = defineStore('counter', () => {
const count = ref(2)
const doubled = computed(() => count.value * 2)
return { count, doubled }
})関数としての Actions
返された関数はaction です。.value を使って ref を直接読み書きできます。
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
})Ref と Computed を返す
セットアップストアの重要なルールは、公開したいものをすべて返すことです。返さなかったものはストア内に非公開で残ります。
export const useStore = defineStore('s', () => {
const visible = ref(0)
const secret = ref('hidden') // not returned -> private
return { visible }
})セットアップストアでのストア間連携
セットアップストアでは、トップレベルで別のストアを呼び出し、computed や actions 内で使用できます。
export const useCartStore = defineStore('cart', () => {
const auth = useAuthStore()
const canCheckout = computed(() => auth.isLoggedIn)
return { canCheckout }
})循環依存を避ける
ストア A がストア B をインポートし、B が A をインポートすると、循環依存が発生する可能性があります。モジュールのトップレベルで別のストアを呼び出すのは避け、必要な action や getter の内部で呼び出してください。
// Risky: top-level use in both directions
// Safe: call useOtherStore() lazily inside the action
actions: {
doWork() {
const other = useOtherStore() // resolved at call time
}
}遅延呼び出しが役立つ理由
ストアのコンポーザブルを関数内で呼び出すと、すべてのモジュールの読み込みが完了した後の実行時まで解決を遅らせることができます。これにより、モジュール評価時のクラッシュを引き起こすインポート循環を解消できます。
オプションストアとセットアップストア
どちらのスタイルも機能面では同等です。使い慣れた宣言的な構造を求めるならオプションストアを、ストア内でウォッチャーやコンポーザブルを使うなど、Composition API の柔軟性を最大限に活用したいならセットアップストアを選んでください。
理解度チェック
ストアの合成についての理解度を確認します。
まとめ
ストアを合成する方法を学びました。
- 別のストアにアクセスするには、アクション内で別のストアのコンポーザブルを呼び出します。
- セットアップストアでは、関数を使用します。ref は状態、computed はゲッター、関数はアクションに相当します。
- 公開したいものはすべて返します。
- 循環依存を避けるため、ストアは関数内で遅延して呼び出します。
よくある質問
「ストアの組み合わせとストア間アクセス」レッスンは無料ですか？
はい。「ストアの組み合わせとストア間アクセス」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「ストアの組み合わせとストア間アクセス」で何を学びますか？
あるストアから別のストアを使う方法、ストア合成のパターン、循環依存の回避 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ストアの組み合わせとストア間アクセス」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- PiniaとVuex：移行する理由
- defineStore：State、Getters、Actions
- ストアの組み合わせとストア間アクセス
- Piniaの永続化とDevtools