setActivePinia()
The setActivePinia()
function allows you to manually set the active Pinia instance. This is useful in specific scenarios where you need to control which Pinia instance is being used.
Signature
ts
function setActivePinia(pinia: Pinia | undefined): Pinia | undefined
Parameters
- pinia:
Pinia | undefined
- The Pinia instance to set as active, orundefined
to clear the active instance
Returns
- Type:
Pinia | undefined
- Description: The previously active Pinia instance, or
undefined
if there was none
Basic Usage
Setting an Active Instance
js
import { createPinia, setActivePinia } from 'pinia'
const pinia = createPinia()
setActivePinia(pinia)
// Now this pinia instance is active
// Stores created after this will use this instance
Getting the Previous Instance
js
import { createPinia, setActivePinia } from 'pinia'
const pinia1 = createPinia()
const pinia2 = createPinia()
setActivePinia(pinia1)
const previousPinia = setActivePinia(pinia2)
console.log(previousPinia === pinia1) // true
Common Use Cases
1. Testing Scenarios
In testing, you often need to create a fresh Pinia instance for each test:
js
import { createPinia, setActivePinia } from 'pinia'
import { beforeEach, describe, it } from 'vitest'
describe('Store Tests', () => {
beforeEach(() => {
// Create a fresh Pinia instance for each test
const pinia = createPinia()
setActivePinia(pinia)
})
it('should work with fresh store', () => {
const store = useMyStore()
// Test your store...
})
})
2. Server-Side Rendering (SSR)
In SSR contexts, you might need to set different Pinia instances for different requests:
js
// server.js
import { createPinia, setActivePinia } from 'pinia'
app.use('*', (req, res, next) => {
// Create a new Pinia instance for each request
const pinia = createPinia()
setActivePinia(pinia)
// Store the instance in the request context
req.pinia = pinia
next()
})
3. Multiple App Instances
When working with multiple Vue app instances:
js
import { createApp } from 'vue'
import { createPinia, setActivePinia } from 'pinia'
// First app
const app1 = createApp(App1)
const pinia1 = createPinia()
app1.use(pinia1)
// Second app with different Pinia instance
const app2 = createApp(App2)
const pinia2 = createPinia()
setActivePinia(pinia2)
app2.use(pinia2)
4. Plugin Development
When developing plugins that need to work with Pinia:
js
function myPiniaPlugin(context) {
// Save current active instance
const previousPinia = setActivePinia(context.pinia)
try {
// Do plugin work with the specific Pinia instance
// ...
} finally {
// Restore previous active instance
setActivePinia(previousPinia)
}
}
Advanced Usage
Temporary Instance Switching
js
import { createPinia, setActivePinia, getActivePinia } from 'pinia'
function withPiniaInstance(pinia, callback) {
const previousPinia = getActivePinia()
setActivePinia(pinia)
try {
return callback()
} finally {
setActivePinia(previousPinia)
}
}
// Usage
const tempPinia = createPinia()
const result = withPiniaInstance(tempPinia, () => {
const store = useMyStore()
return store.someComputation()
})
Instance Isolation
js
class PiniaManager {
constructor() {
this.instances = new Map()
}
createInstance(key) {
const pinia = createPinia()
this.instances.set(key, pinia)
return pinia
}
useInstance(key) {
const pinia = this.instances.get(key)
if (pinia) {
setActivePinia(pinia)
}
return pinia
}
destroyInstance(key) {
this.instances.delete(key)
}
}
const manager = new PiniaManager()
manager.createInstance('main')
manager.createInstance('admin')
// Switch to admin instance
manager.useInstance('admin')
const adminStore = useAdminStore()
// Switch to main instance
manager.useInstance('main')
const mainStore = useMainStore()
Error Handling
Checking for Active Instance
js
import { getActivePinia, setActivePinia } from 'pinia'
function ensureActivePinia() {
if (!getActivePinia()) {
console.warn('No active Pinia instance found, creating one...')
const pinia = createPinia()
setActivePinia(pinia)
return pinia
}
return getActivePinia()
}
Safe Instance Setting
js
function safeSetActivePinia(pinia) {
try {
return setActivePinia(pinia)
} catch (error) {
console.error('Failed to set active Pinia instance:', error)
return undefined
}
}
TypeScript Usage
ts
import { Pinia, createPinia, setActivePinia } from 'pinia'
function createAndSetPinia(): Pinia {
const pinia: Pinia = createPinia()
const previous: Pinia | undefined = setActivePinia(pinia)
if (previous) {
console.log('Replaced previous Pinia instance')
}
return pinia
}
// Type-safe instance manager
class TypedPiniaManager {
private instances = new Map<string, Pinia>()
createInstance(key: string): Pinia {
const pinia = createPinia()
this.instances.set(key, pinia)
return pinia
}
setActive(key: string): Pinia | undefined {
const pinia = this.instances.get(key)
if (pinia) {
return setActivePinia(pinia)
}
return undefined
}
}
Best Practices
1. Always Restore Previous Instance
When temporarily changing the active instance, always restore the previous one:
js
// Good
const previous = setActivePinia(tempPinia)
try {
// Do work with temp instance
} finally {
setActivePinia(previous)
}
// Bad - doesn't restore
setActivePinia(tempPinia)
// Do work...
// Previous instance is lost
2. Use in Setup Functions
Prefer setting active Pinia in setup functions rather than during module loading:
js
// Good
function setupApp() {
const pinia = createPinia()
setActivePinia(pinia)
const app = createApp(App)
app.use(pinia)
return app
}
// Avoid - sets during module load
const pinia = createPinia()
setActivePinia(pinia) // This runs immediately
3. Clear When No Longer Needed
js
function cleanup() {
// Clear the active instance when shutting down
setActivePinia(undefined)
}
4. Document Instance Switching
js
/**
* Temporarily switches to the admin Pinia instance
* for administrative operations
*/
function withAdminContext(callback) {
const previous = setActivePinia(adminPinia)
try {
return callback()
} finally {
setActivePinia(previous)
}
}
Common Pitfalls
1. Forgetting to Restore
js
// Wrong - previous instance is lost
setActivePinia(newPinia)
doSomething()
// Correct - restore previous instance
const previous = setActivePinia(newPinia)
try {
doSomething()
} finally {
setActivePinia(previous)
}
2. Setting During Module Load
js
// Problematic - runs during import
const pinia = createPinia()
setActivePinia(pinia)
// Better - set when needed
export function initializePinia() {
const pinia = createPinia()
setActivePinia(pinia)
return pinia
}
3. Not Handling Undefined
js
// Wrong - doesn't handle undefined
function switchInstance(pinia) {
setActivePinia(pinia) // pinia might be undefined
}
// Correct - handle undefined case
function switchInstance(pinia) {
if (pinia) {
setActivePinia(pinia)
} else {
console.warn('Cannot set undefined Pinia instance')
}
}
Related Functions
getActivePinia()
- Get the currently active Pinia instancecreatePinia()
- Create a new Pinia instance