Vue.js Assignment– 4

State Management with Vuex & Pinia

Basic Questions

  1. Create a Vuex store with state: { count: 0 }, a mutation to increment, and render the count in a component.
  2. Add a Vuex getter doubleCount and display it in the UI.
  3. Dispatch a Vuex action that commits the increment mutation after 500ms.
  4. Split the store into a user module with state: { name: ” } and a setName mutation.
  5. Enable Vuex strict mode and demonstrate a console error when mutating state outside mutations.
  6. Create a namespaced cart module and read a getter using its namespace.
  7. Map Vuex state, getters, actions, and mutations in a component using helpers (mapState, etc.).
  8. Add a products module that fetches a JSON list (mock with setTimeout) via an action and stores it.
  9. Persist Vuex user.name to localStorage on mutation and hydrate it on app load.
  10. Persist the cart module to sessionStorage and restore it on refresh.
  11. Add a plugin that logs every mutation type and payload to the console.
  12. Create a Vuex action that handles API errors and stores an error message in state.
  13. Add a root-level RESET_STATE mutation that clears all modules’ state.
  14. Move hard-coded feature flags into Vuex and read them via getters in multiple components.
  15. Implement a logout action that clears tokens in state and storage.
  16. Add a derived getter that filters products by a search term in state.
  17. Lazy-register the cart module only when the cart page is visited.
  18. Unregister the cart module when leaving the cart page and verify state is removed.
  19. Create a loading boolean in state and toggle it around async actions.
  20. Document the difference between mutations and actions with a small code example.

Intermediate Questions

  1. Organize Vuex into namespaced modules: auth, cart, catalog, each with state/getters/mutations/actions.
  2. Implement cross-module communication: an auth/login action commits cart/mergeGuestCart with payload.
  3. Add a Vuex plugin that automatically persists selected module keys to localStorage (whitelist).
  4. Implement optimistic updates: immediately add an item to cart, revert on API failure.
  5. Use a factory function to create initial state to avoid shared references across modules.
  6. Add a memoized getter that computes cart total and verify it doesn’t recompute unnecessarily.
  7. Guard against committing large payloads by normalizing entities (by id) in mutations.
  8. Implement action cancellation (ignore late responses) with a request token stored in state.
  9. Add a checkout action that sequences multiple async calls and commits progress steps.
  10. Create a module with dynamic namespace registered per route parameter (e.g., board/:id).
  11. Add SSR-friendly hydration logic for Vuex state (simulate with pre-injected window state).
  12. Enforce strict mode only in development and measure perf impact in production.
  13. Replace direct localStorage writes with a storage service layer used by Vuex plugins.
  14. Add rehydration versioning: if stored schema version mismatches, run a migration before loading.
  15. Implement time-based expiration for persisted keys and clear them when stale.
  16. Create a namespaced notifications module with queue behavior (enqueue/dequeue mutations).
  17. Batch multiple related mutations into a single action and commit them atomically.
  18. Add unit tests for a module’s mutations and actions using a test runner.
  19. Profile a large mutation payload and refactor to incremental patch mutations.
  20. Document a module communication diagram showing action flows and mutation effects.

Advanced Questions

  1. Migrate an existing Vuex store to Pinia: create equivalent stores, actions, and getters with defineStore.
  2. Replace Vuex helpers with Pinia composables (useXStore) in components and verify reactivity.
  3. Implement a Pinia plugin to persist selected store state to localStorage with versioning and TTL.
  4. Convert Vuex modules to separate Pinia stores and model cross-store interactions (e.g., auth ↔ cart).
  5. Use Pinia’s store.$subscribe to log mutations-like patches and sync to storage efficiently.
  6. Implement a Pinia action with optimistic update + rollback on failure and verify UI consistency.
  7. Benchmark Vuex vs Pinia update paths on a list of 5k items and report render timings.
  8. Build a large-scale pattern: domain stores (entities), UI stores (view state), and session store; enforce read-only accessors and typed actions.
  9. Create a storage abstraction that supports localStorage, sessionStorage, and an in-memory fallback for SSR, and plug it into both Vuex and Pinia persistence.
  10. Final Hands-on Project:
    • Start with a Vuex app using namespaced modules, strict mode, plugins, and persisted subsets
    • Migrate fully to Pinia with equivalent stores and custom persistence plugin
    • Apply best practices for large-scale apps (normalized state, action sequencing, error handling, SSR-safe hydration)
    • Prove performance gains with measurements and explain trade-offs.