VUEX_TO_PINIA_MIGRATION - xopherdeep/do-it-for-the-xp GitHub Wiki

🔄 Vuex → Pinia Migration Checklist

Status: 🟡 In Progress
Last Updated: 2025-12-21
Goal: Complete removal of all Vuex dependencies in favor of Pinia stores

📦 Available Pinia Stores

Store	Location	What It Replaces
`useUserStore`	`src/lib/store/stores/user.ts`	`state.user`, `state.users`, `getUserById`, `usersAz`, `loadUsers`
`useBattleStore`	`src/lib/store/stores/battle.ts`	`state.battle`, `battleState`, battle actions
`useGameStore`	`src/lib/store/stores/game.ts`	`devMode`, `theme`, `userActions`, entity collections
`useAudioStore`	`src/lib/store/stores/audio.ts`	`state.bgm`, audio actions

🗺️ Migration Mapping

Vuex → Pinia Translation Guide

Vuex Pattern	Pinia Replacement
`import { useStore } from 'vuex'`	`import { useUserStore } from '@/lib/store/stores/user'`
`const store = useStore()`	`const userStore = useUserStore()`
`store.state.user`	`userStore.currentUser`
`store.state.users`	`userStore.users`
`store.getters.getUserById(id)`	`userStore.getUserById(id)`
`store.getters.usersAz`	`userStore.usersAz`
`store.getters.isLoggedIn`	`userStore.currentUser.isAuthenticated`
`store.dispatch('loadUsers')`	`userStore.loadUsers()`
`store.state.battle`	`battleStore.active`, `battleStore.terrain`, etc.
`store.getters.battleState('active')`	`battleStore.active`
`store.dispatch('enterBattle')`	`battleStore.enterBattle()`
`store.dispatch('startBattleTimer')`	`battleStore.startBattleTimer()`
`store.commit('ACTIVATE_BATTLE')`	`battleStore.activateBattle()`
`store.state.devMode`	`gameStore.devMode`
`store.commit('SET_DEV_MODE', val)`	`gameStore.setDevMode(val)`
`store.state.theme`	`gameStore.theme`
`store.dispatch('changeSoundFX', payload)`	`gameStore.changeSoundFX(payload)`
`store.state.bgm`	`audioStore.bgm`
`store.dispatch('changeBGM', payload)`	`audioStore.changeBGM(payload)`
`mapGetters(['getUserById'])`	Use composable: `const userStore = useUserStore()`
`mapState(['theme'])`	Destructure: `const { theme } = gameStore`
`mapActions(['loadUsers'])`	Direct call: `userStore.loadUsers()`

✅ Migration Checklist

Phase 1: Critical Core Services

File	Status	Notes
`src/router/guard.routes.ts`	⬜ TODO	Auth guards, battle state checks
`src/lib/services/battle/BattleService.ts`	⬜ TODO	Heavy store usage, needs Store type removal
`src/lib/services/battle/index.ts`	⬜ TODO	Store type export
`src/lib/engine/audio/routeMusic.ts`	⬜ TODO	BGM dispatch calls

Phase 2: Main App & Settings

File	Status	Notes
`src/app/App.ts`	⬜ TODO	Main app entry
`src/app/SideMenu/XpSupport/XpSupport.ts`	✅ DONE	Migrated to useGameStore
`src/app/SideMenu/XpSettings/components/ThemeSettings.vue`	✅ DONE	Migrated to useGameStore
`src/app/SideMenu/XpSettings/components/FamilySettings.vue`	✅ DONE	Migrated to useUserStore
`src/app/SideMenu/XpSettings/components/PartySettings.vue`	✅ DONE	Migrated to useUserStore
`src/app/SideMenu/XpSettings/components/RewardSettings.vue`	✅ DONE	Migrated to useUserStore
`src/app/SideMenu/XpSettings/components/NotificationSettings.vue`	✅ DONE	Migrated to useUserStore
`src/app/SideMenu/XpSettings/components/XpChoreSettings/ChoreSettings.ts`	✅ DONE	Migrated to useUserStore

Phase 3: Game Master Views

File	Status	Notes
`src/app/Admin/XpApprovals/XpApprovals.vue`	✅ DONE	Migrated to useUserStore
`src/app/Admin/XpChat/XpChat.ts`	✅ DONE	Migrated to useUserStore
`src/app/Admin/XpAccessories/components/XpCreateUpdateAccessory.vue`	⬜ TODO	mapGetters

Phase 4: Player/Console Views

File	Status	Notes
`src/app/Console/BattleField/BattleField.ts`	⬜ TODO	useStore, store.state.user
`src/app/Console/BattleField/hooks/useBattleEngine.ts`	⬜ TODO	Heavy store.state.user usage
`src/app/Console/MyPortal/UserHud/MyGoldPoints/MyGoldPoints.ts`	⬜ TODO	mapGetters, mapActions, useStore
`src/app/Console/MyPortal/UserProfile/UserProfile.ts`	⬜ TODO	mapGetters
`src/app/Console/MyPortal/HomeTown/AccessoryShop/AccessoryShop.ts`	⬜ TODO	mapGetters
`src/app/Console/MyPortal/HomeTown/HospitalHub/HospitalHub.ts`	⬜ TODO	mapGetters
`src/app/Console/MyPortal/HomeTown/HospitalHub/components/XpViewStats.vue`	⬜ TODO	useStore
`src/app/Console/MyPortal/HomeTown/BattleGround/BattleGround.ts`	⬜ TODO	mapState, this.$store
`src/app/Console/MyPortal/MyHome/MyFoods/MyFoods.ts`	⬜ TODO	useStore
`src/app/Console/WorldMap/WorldDesert/WorldDesert.ts`	⬜ TODO	useStore

Phase 5: Components

File	Status	Notes
`src/components/CardUserStats/CardUserStats.ts`	⬜ TODO	mapGetters

Phase 6: Utils & Test Files (Low Priority)

File	Status	Notes
`src/lib/utils/battleroom/BattleroomTestUtils.ts`	⬜ TODO	Test utility
`src/lib/utils/battleroom/index.ts`	⬜ TODO	Store type
`src/app/Console/BattleField/__tests__/BattleGround.spec.ts`	⬜ TODO	Test file
`src/views/Dev/BattleroomDevTools/BattleroomDevTools.vue`	⬜ TODO	Dev tools
`src/views/Dev/BattleroomDevTools/main-battleroom.ts`	⬜ TODO	Dev entry

🗑️ Files to Delete After Migration

Once all migrations are complete:

src/lib/store/index.ts - Main Vuex store
src/lib/store/actions.ts - Vuex actions
src/lib/store/mutations.ts - Vuex mutations
src/lib/store/getters.js - Vuex getters
src/lib/store/bgmActionPatch.js - Audio patch

📝 Migration Pattern Examples

Example 1: Options API with mapGetters

Before (Vuex):

import { mapGetters } from "vuex";

export default defineComponent({
  computed: {
    ...mapGetters(["getUserById"]),
  },
  methods: {
    getUser() {
      return this.getUserById(this.userId);
    }
  }
});

After (Pinia):

import { useUserStore } from '@/lib/store/stores/user';

export default defineComponent({
  setup() {
    const userStore = useUserStore();
    return { userStore };
  },
  methods: {
    getUser() {
      return this.userStore.getUserById(this.userId);
    }
  }
});

Example 2: Composition API with useStore

Before (Vuex):

import { useStore } from 'vuex';

const store = useStore();
const users = computed(() => store.getters.usersAz);
await store.dispatch('loadUsers');

After (Pinia):

import { useUserStore } from '@/lib/store/stores/user';

const userStore = useUserStore();
const users = computed(() => userStore.usersAz);
await userStore.loadUsers();

Example 3: this.$store in Options API

Before (Vuex):

if (this.$store.state.devMode) { ... }
this.$store.commit('SET_DEV_MODE', true);

After (Pinia):

// In setup() or data()
const gameStore = useGameStore();

// In methods
if (this.gameStore.devMode) { ... }
this.gameStore.setDevMode(true);

🎯 Current Progress

Total Files: 32
Migrated: 10
Remaining: 22
Progress: 31%

✅ Completed Migrations (2025-12-21)

XpSupport.ts → useGameStore
ThemeSettings.vue → useGameStore
FamilySettings.vue → useUserStore
PartySettings.vue → useUserStore
RewardSettings.vue → useUserStore
NotificationSettings.vue → useUserStore
ChoreSettings.ts → useUserStore
XpApprovals.vue → useUserStore
XpChat.ts → useUserStore

📌 Notes

Keep legacy Vuex store running in parallel until all migrations complete
Test each component after migration
Run yarn build to verify no TypeScript errors
The musicBookmark getter in Vuex needs to be added to useAudioStore if used