Skip to content

Pinia Task 15 - teardown #6944

@n-lark

Description

@n-lark

Task 15 — Teardown (PR 16)

Gate: Tasks 12, 13, 14 merged. Vuex account module is now a near-empty shell — all state has been moved to Pinia, checkState delegates everything to Pinia stores.

15.1 — Move checkState fully to account-auth

The Vuex checkState action is now mostly delegation calls to Pinia. Move the whole thing into account-auth.js as the checkState action. Remove it from Vuex.

15.2 — Finalise logout in account-auth

Replace the Vuex logout with the full Pinia version. With the skipReset plugin, call $reset() uniformly on every store:

// account-auth.js — final logout
async logout() {
    await userApi.logout()
    useAccountAuthStore().$reset()
    useAccountTeamStore().$reset()
    useAccountSettingsStore().$reset()  // skipReset: ['settings', 'features'] preserves them
    useContextStore().$reset()
    useUxDialogStore().$reset()
    useUxToursStore().$reset()
    useUxNavigationStore().$reset()
    useUxDrawersStore().$reset()
    useProductTablesStore().$reset()
    useProductBrokersStore().$reset()
    useProductAssistantStore().$reset()
    useProductExpertInsightsAgentStore().$reset()
    useProductExpertOperatorAgentStore().$reset()
    useProductExpertStore().$reset()
}

15.3 — Clean up api/client.js

During Task 11, api/client.js was changed to lazily require('../store/index.js') to break a circular dependency chain:

product-expert.js → api/expert.js → api/client.js → store/index.js → account/index.js → routes.js → team/index.vue → product-expert.js

With Vuex gone, the cycle is broken permanently. Replace the lazy require with direct Pinia store calls:

// Before (workaround from Task 11):
const store = require('../store/index.js').default
store.dispatch('account/setOffline', true)
store.dispatch('account/logout')

// After:
import { useAccountAuthStore } from '@/stores/account-auth.js'
useAccountAuthStore().setOffline(true)
useAccountAuthStore().logout()

15.4 — Update route guards

routes.js uses useStore() from Vuex to read user state in ensureAdmin and ensurePermission. Replace with Pinia and swap the Vuex store watcher for watch() on Pinia reactive state.

15.5 — Update App.vue

The root component reads from account, ux, and drawers. The ux and drawers stores are already on Pinia. Update the remaining account reads to use useAccountAuthStore, useAccountTeamStore, useAccountSettingsStore.

15.6 — Update bootstrap.service.js

Replace store.dispatch('account/checkIfAuthenticated') with useAccountAuthStore().checkIfAuthenticated(). Remove waitForStoreHydration() entirely — Pinia persistence is synchronous and Vuex is gone.

Eagerly call the account stores before checkUser() so persisted state is restored from localStorage before any auth checks run:

// bootstrap.service.js — final form
async init () {
    return this.waitForAppMount()
        .then(() => {
            // Eagerly create account stores — restores persisted state from localStorage instantly
            useAccountAuthStore()
            useAccountTeamStore()
            useAccountSettingsStore()
        })
        .then(() => this.checkUser())
        .then(() => this.mountApp())
        .then(() => this.waitForRouterReady())
        .then(() => this.markAsReady())
}

15.7 — Delete Vuex and all migration scaffolding

Once all consumers are updated:

  • Delete the entire frontend/src/store/ directory (Vuex store root, all modules, and the storage plugin)
  • Remove app.use(store) and store.commit('initializeStore') from main.js
  • Delete _account_bridge.js from frontend/src/stores/
  • Run npm uninstall vuex

15.8 — Final verification

grep -r "from 'vuex'" frontend/src/          # should return nothing
grep -r "this\.\$store" frontend/src/         # should return nothing
grep -r "_account.bridge" frontend/src/       # should return nothing

Full Completion Checklist

  • Phase 0: Pinia + pinia-plugin-persistedstate@4 + @pinia/testing installed, skipReset plugin created and registered, bootstrap.service.js updated, logout bridge scaffolded, service-layer Vuex access audited
  • PR 2 ux-dialog: store created, mixins/Dialog.js updated, Vuex module deleted, store tests written
  • PR 3 ux-tours: store created, markRaw on tour instance, Vuex module deleted, store tests written
  • PR 4 ux-navigation: store created, account bridge created, Vuex module deleted, store tests written
  • PR 5 ux-drawers: store created, markRaw on components, useUxNavigationStore imported (not require()), Vuex module deleted, store tests written
  • PR 6 context: store created, bridge reads in expert getter, Vuex module deleted, store tests written
  • PR 7 product-tables: store created, clearState bridge in Vuex account, Vuex module deleted, store tests written
  • PR 8 product-brokers: store created, clearUns bridge in Vuex account, Vuex module deleted, store tests written
  • PR 9 product-assistant: store created, context.js expert getter partially updated, Vuex module deleted, store tests written
  • PR 10 product-expert-ff-agent: store created, markRaw on timer, store tests written
  • PR 11 product-expert-operator-agent: store created, markRaw on timer, store tests written
  • PR 12 product-expert: store created, useProductAssistantStore imported, sub-module access pattern updated, context.js expert getter finalised, all expert Vuex modules deleted, product Vuex root module deleted, store tests written
  • PR 13 account-auth: store created, auth actions ported, Vuex checkState delegates auth to Pinia, _account_bridge.js updated, ~25 consumers updated, store tests written
  • PR 14 account-team: store created, team actions ported, Vuex checkState delegates team to Pinia, _account_bridge.js updated, ~40 consumers updated, store tests written
  • PR 15 account-settings: store created, featuresCheck ported line-by-line, Vuex checkState delegates settings to Pinia, _account_bridge.js updated (no longer reads from Vuex), ~50 consumers updated, store tests written
  • PR 16 Teardown: checkState moved fully to account-auth, final logout action with all $reset() calls, api/client.js lazy require removed, route guards updated, App.vue updated, bootstrap.service.js finalised (waitForStoreHydration removed, account stores eagerly initialised), frontend/src/store/ deleted, _account_bridge.js deleted, npm uninstall vuex, final grep verification passes

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Status

Closed / Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions