0Pricing
Vue Academy · Lesson

Composing Stores and Cross-Store Access

Using one store inside another, store composition patterns, avoiding circular dependencies.

Stores Can Use Other Stores

Real apps have multiple stores that need each other. A cart store may need the auth store to know the current user. Pinia makes cross-store access straightforward.

Calling a Store Inside an Action

Inside an action, simply call the other store composable. Because actions run after Pinia is active, this is safe.

import { useAuthStore } from './auth'

export const useCartStore = defineStore('cart', {
  state: () => ({ items: [] }),
  actions: {
    checkout() {
      const auth = useAuthStore()
      if (!auth.isLoggedIn) return
      // proceed with auth.userId
    }
  }
})

All lessons in this course

  1. Pinia vs Vuex: Why the Switch
  2. defineStore: State, Getters, Actions
  3. Composing Stores and Cross-Store Access
  4. Pinia Persistence and Devtools
← Back to Vue Academy