Skip to content

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, or undefined 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')
  }
}

Released under the MIT License.