diff --git a/packages/pinia/src/createPinia.ts b/packages/pinia/src/createPinia.ts index f105460e5..342a88d94 100644 --- a/packages/pinia/src/createPinia.ts +++ b/packages/pinia/src/createPinia.ts @@ -18,6 +18,8 @@ export function createPinia(): Pinia { let _p: Pinia['_p'] = [] // plugins added before calling app.use(pinia) let toBeInstalled: PiniaPlugin[] = [] + let onInstallCallbacks: ((app: App) => void)[] = [] + let _a: App | null = null const pinia: Pinia = markRaw({ install(app: App) { @@ -47,9 +49,27 @@ export function createPinia(): Pinia { }, _p, - // it's actually undefined here - // @ts-expect-error - _a: null, + + get _a() { + return _a! + }, + set _a(app) { + _a = app + + if (app) { + onInstallCallbacks.forEach((cb) => cb(app)) + onInstallCallbacks = [] + } + }, + + onInstall(cb: (app: App) => void) { + if (_a) { + cb(_a) + } else { + onInstallCallbacks.push(cb) + } + }, + _e: scope, _s: new Map(), state, diff --git a/packages/pinia/src/devtools/plugin.ts b/packages/pinia/src/devtools/plugin.ts index 04e4abdc5..327f237fb 100644 --- a/packages/pinia/src/devtools/plugin.ts +++ b/packages/pinia/src/devtools/plugin.ts @@ -521,7 +521,7 @@ export function devtoolsPlugin< S extends StateTree = StateTree, G /* extends GettersTree */ = _GettersTree, A /* extends ActionsTree */ = _ActionsTree ->({ app, store, options }: PiniaPluginContext) { +>({ store, options, pinia }: PiniaPluginContext) { // HMR module if (store.$id.startsWith('__hot:')) { return @@ -553,9 +553,11 @@ export function devtoolsPlugin< } } - addStoreToDevtools( - app, - // FIXME: is there a way to allow the assignment from Store to StoreGeneric? - store as StoreGeneric + pinia.onInstall((app) => + addStoreToDevtools( + app, + // FIXME: is there a way to allow the assignment from Store to StoreGeneric? + store as StoreGeneric + ) ) } diff --git a/packages/pinia/src/rootStore.ts b/packages/pinia/src/rootStore.ts index 0509a5c8e..359ea0a6b 100644 --- a/packages/pinia/src/rootStore.ts +++ b/packages/pinia/src/rootStore.ts @@ -57,6 +57,14 @@ export interface Pinia { */ use(plugin: PiniaPlugin): Pinia + /** + * Executes callback after Pinia is installed into Vue app + * + * @internal + * @param cb - callback to execute + */ + onInstall(cb: (app: App) => void): void + /** * Installed store plugins *