how to use with Composition API out of component?

[Fallsleep]

I defined a store like this:

// user.ts export const useUserStore = defineStore('user', { state: () => ({ id: 0, }), actions: { logout(to?: RouteLocationRaw|null) { return new Promise((resolve, reject) => { logout().then(response => { this.$reset() const router = useRouter() router.push(to || { path: domainOption.loginRoutePath }) resolve(response) }).catch(error => { reject(error) }) }) }, } })

when testing pinia，it won't mount a componet:

// user.test.ts describe('userStore', () => { beforeEach(() => { setActivePinia(createPinia()) }) it('logout called router.push ', async () => { const userStore = useUserStore() const router = getRouter() await userStore.logout() expect(router.push).toHaveBeenCalledWith({ path: domainOption.loginRoutePath }) }) })

then I got:

[Vue warn]: inject() can only be used inside setup() or functional components. ❯ src/store/__test__/user.test.ts (13 tests | 6 failed) 102ms ❯ src/store/__test__/user.test.ts > userStore > logout → Cannot read properties of undefined (reading 'addRoute') ❯ src/store/__test__/user.test.ts > userStore > logout call routerStore.resetRoute → Cannot read properties of undefined (reading 'push') 

how to solve it? mount a blank component? that seems no work

[posva]

See https://pinia.vuejs.org/core-concepts/plugins.html#plugins

You cannot call useRouter() within the action like you do, that's where the inject() can only be used inside setup error comes from

[Fallsleep]

thank! Following https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-external-properties , inject() is solved.

I create a function to return plugin:

// store/plugin.ts export function pinaRouterPlugin(router: Router): PiniaPlugin { return ({ store }) => { store.router = markRaw(router) } }

and declare properties:

// types/pinia.d.ts import type { Router } from 'vue-router' declare module 'pinia' { export interface PiniaCustomProperties { router: Router } }

change store to:

// user.ts export const useUserStore = defineStore('user', { state: () => ({ id: 0, }), actions: { logout(to?: RouteLocationRaw|null) { return new Promise((resolve, reject) => { logout().then(response => { this.$reset() this.router.push(to || { path: domainOption.loginRoutePath }) resolve(response) }).catch(error => { reject(error) }) }) }, } })

use the plugin in main.ts

// main.ts const app = createApp(App) app.use(pinia.use(pinaRouterPlugin(router))) app.use(router) app.mount('#app')

use the plugin in store test:

// user.test.ts describe('userStore', () => { const app = createApp({}) beforeEach(() => { const pinia = createPinia().use(pinaRouterPlugin(getRouter())) app.use(pinia) setActivePinia(pinia) }) it('logout called router.push ', async () => { const userStore = useUserStore() const router = getRouter() await userStore.logout() expect(router.push).toHaveBeenCalledWith({ path: domainOption.loginRoutePath }) }) })

use the plugin in component test:

// component.test.ts describe('component', () => { beforeEach(() => { render(Component, { global:{ plugins: [ createTestingPinia({ stubActions: false, plugins:[pinaRouterPlugin(getRouter())] }) ] } }) }) it('pass', async () => { screen.getByText('foo bar') // ... }) })