Split state into domain-specific modular stores and create reusable general logic through factory functions; 2. Access the dependency store at runtime rather than when module loading to avoid circular references; 3. Use $onAction to implement cross-cutting concerns such as logs and monitoring; 4. Implement optimistic updates in operations and provide a failed rollback mechanism to improve user experience; 5. Persist specific Store state to localStorage through Pinia plug-in; 6. Ensure the type safety of the store with TypeScript and generics; 7. Dynamically import the Store on demand to implement lazy loading to optimize performance of large applications. Together, these advanced modes improve the scalability, maintainability, and development efficiency of Vue applications.

When building medium to large-scale Vue applications, managing state efficiently becomes critical. While Vue's reactivity system handles local component state well, sharing state across components calls for a more structured approach. Pinia , Vue's official state management library, offers a clean, type-safe, and modular way to manage global state. But beyond basic usage, advanced patterns can significantly improve scalability, maintainability, and developer experience.

Here are key advanced state management patterns in Vue with Pinia that help you write robust and scalable applications.

1. Modular Store Design with Reusable Logic

Instead of creating one monolithic store, break your state into domain-specific stores (eg, useUserStore , useCartStore , useProductStore ). This improves code organization and enables better tree-shaking.

But go a step further: extract reusable logic into composable-like stores .

For example, if multiple entities need CRUD operations, create a generic store factory:

 // stores/useResourceStore.ts
import { defineStore } from 'pinia'

export function createResourceStore<T>(
  id: string,
  fetchFn: () => Promise<T[]>
) {
  return defineStore(id, {
    state: () => ({
      items: [] as T[],
      loading: false,
    }),
    actions: {
      async load() {
        this.loading = true
        try {
          this.items = await fetchFn()
        } finally {
          this.loading = false
        }
      },
    },
  })
}

// usage in components
const useProductStore = createResourceStore(&#39;products&#39;, fetchProducts)
const useUserStore = createResourceStore(&#39;users&#39;, fetchUsers)

? This pattern blends Pinia's reactivity with composable-style reuse, reducing boilerplate.

2. Store Dependencies and Cross-Store Interactions

Sometimes stores need to interact. For example, the cart store may need user info from the user store.

Avoid importing stores directly inside other stores during definition (due to potential circular imports), but it's safe to use them inside actions or getters after initialization :

 // stores/useCartStore.ts
import { defineStore } from 'pinia'
import { useUserStore } from './useUserStore'

export const useCartStore = defineStore('cart', {
  state: () => ({
    Items: [],
  }),
  getters: {
    // Access another store via getter
    belongsToActiveUser(): boolean {
      const userStore = useUserStore()
      return this.userId === userStore.currentUserId
    }
  },
  actions: {
    async syncWithUser() {
      const userStore = useUserStore()
      if (userStore.isLoggedIn) {
        await this.fetchCart(userStore.id)
      }
    }
  }
})

? Best Practice: Access dependent stores at runtime, not at module load time.

3. Using $onAction for Cross-Cutting Concerns

Pinia's $onAction hook lets you intercept actions globally—perfect for logging, analytics, error tracking, or optimistic updates.

 export const useLoggerStore = defineStore('logger', {
  state: () => ({ /* ... */ }),
  actions: {
    fetchProjects() { /* ... */ },
    createProject() { /* ... */ }
  }
})

// Set up logging middleware
const store = useLoggerStore()
store.$onAction(({ name, store, args, after, onError }) => {
  console.log(`[Action Start] ${name}`)

  after(() => {
    console.log(`[Action Success] ${name}`)
  })

  onError((error) => {
    console.error(`[Action Failed] ${name}`, error)
  })
})

You can even centralize this in a plugin:

 // plugins/piniaLogger.ts
export const piniaLogger = ({ store }) => {
  store.$onAction(({ name, after, onError }) => {
    const startTime = Date.now()
    console.log(`${store.$id}::${name} started`)

    after(() => {
      console.log(`${store.$id}::${name} completed in ${Date.now() - startTime}ms`)
    })

    onError((error) => {
      console.warn(`${store.$id}::${name} failed`, error)
    })
  })
}

// main.ts
pinia.use(piniaLogger)

4. Optimistic Updates and Rollback with Actions

For better UX, update the UI before the server confirms the change—then revert if it fails.

 async removeItem(id: number) {
  // Optimistically update state
  const removedItem = this.items.find(item => item.id === id)
  this.items = this.items.filter(item => item.id !== id)

  // Setup rollback
  const rollback = () => {
    if (removedItem) this.items.push(removedItem)
  }

  try {
    await deleteItemAPI(id)
  } catch (error) {
    rollback()
    throw error
  }
}

? This pattern keeps your app feeling fast while preserving data integrity.

5. Persisting State with Pinia Plugins

Use Pinia's plugin system to persist selected stores or state to localStorage or other storage.

 // plugins/persist.ts
export const createPersistPlugin = (key: string) => {
  return ({ store }) => {
    // Hydrate on init
    const saved = localStorage.getItem(key)
    if (saved) {
      store.$patch(JSON.parse(saved))
    }

    // Persist on every change
    store.$subscribe((_, state) => {
      localStorage.setItem(key, JSON.stringify(state))
    })
  }
}

// Apply to specific store
const useCartStore = defineStore('cart', {
  // ... your state, actions
})

useCartStore().$use(createPersistPlugin('cart'))

? Tip: Be cautious with sensitive data and consider expiration or encryption.

6. Type-Safe Stores with TypeScript and Generics

Pinia works seamlessly with TypeScript. Use generics and interfaces to ensure full type safety:

 interface User {
  id: number
  name: string
}

export const useUserStore = defineStore('user', {
  state: (): {
    users: User[]
    currentUser: User | null
  } => ({
    users: [],
    currentUser: null
  }),
  actions: {
    setUser(id: number) {
      const user = this.users.find(u => u.id === id)
      if (!user) throw new Error('User not found')
      this.currentUser = user
    }
  }
})

With auto-completion and compile-time checks, refactoring becomes safer and development faster.

7. Lazy Loading Stores in Large Apps

In big applications, you might not want to instantiate all stores upfront. Pinia supports lazy loading of stores:

 // Lazy-load a store only when needed
async function getAnalyticsStore() {
  if (!useAnalyticsStore()) {
    const { useAnalyticsStore } = await import('@/stores/useAnalyticsStore')
    return useAnalyticsStore()
  }
  return useAnalyticsStore()
}

This reduces initial bundle size and improves performance.

Final Thoughts

Pinia is more than just a state container—it's a foundation for scalable Vue applications when used with advanced patterns. By combining modular design, cross-store coordination, plugins, type safety, and UX-focused techniques like optimistic updates, you can build applications that are easier to maintain and extend.

These patterns aren't always needed upfront, but recognizing when to apply them is key as your app grows.

Basically, think of Pinia not just as a place to store data—but as a tool to model your app's behavior in a predictable, reusable way.

The above is the detailed content of Advanced State Management Patterns in Vue with Pinia. For more information, please follow other related articles on the PHP Chinese website!