Migrating from 0.0.7 ¶

The versions after 0.0.7: 0.1.0, and 0.2.0, came with a few big breaking changes. This guide helps you migrate whether you use Vue 2 or Vue 3. The whole changelog can be found in the repository:

• For Pinia <= 1 for Vue 2
• For Pinia >= 2 for Vue 3

If you have questions or issues regarding the migration, feel free to open a discussion to ask for help.

No more store.state ¶

You no longer access the store state via a state property, you can directly access any state property.

Given a store defined with:

const useStore({
  id: 'main',
  state: () => ({ count: 0 })
})

Do

 const store = useStore()

-store.state.count++
+store.count.++

You can still access the whole store state with $state when needed:

-store.state = newState
+store.$state = newState

Rename of store properties ¶

All store properties (id, patch, reset, etc) are now prefixed with $ to allow properties defined on the store with the same names. Tip: you can refactor your whole codebase with F2 (or right-click + Refactor) on each of the store's properties

 const store = useStore()
-store.patch({ count: 0 })
+store.$patch({ count: 0 })

-store.reset()
+store.$reset()

-store.id
+store.$id

The Pinia instance ¶

It's now necessary to create a pinia instance and install it:

If you are using Vue 2 (Pinia <= 1):

import Vue from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'

const pinia = createPinia()
Vue.use(PiniaVuePlugin)
new Vue({
  el: '#app',
  pinia,
  // ...
})

If you are using Vue 3 (Pinia >= 2):

import { createApp } from 'vue'
import { createPinia, PiniaVuePlugin } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
createApp(App).use(pinia).mount('#app')

The pinia instance is what holds the state and should be unique per application. Check the SSR section of the docs for more details.

SSR changes ¶

The SSR plugin PiniaSsr is no longer necessary and has been removed. With the introduction of pinia instances, getRootState() is no longer necessary and should be replaced with pinia.state.value:

If you are using Vue 2 (Pinia <= 1):

// entry-server.js
-import { getRootState, PiniaSsr } from 'pinia',
+import { createPinia, PiniaVuePlugin } from 'pinia',


-// install plugin to automatically use correct context in setup and onServerPrefetch
-Vue.use(PiniaSsr);
+Vue.use(PiniaVuePlugin)

 export default context => {
+  const pinia = createPinia()
   const app = new Vue({
     // other options
+    pinia
   })

   context.rendered = () => {
     // pass state to context
-    context.piniaState = getRootState(context.req)
+    context.piniaState = pinia.state.value
   };

-   return { app }
+   return { app, pinia }
 }

setActiveReq() and getActiveReq() have been replaced with setActivePinia() and getActivePinia() respectively. setActivePinia() can only be passed a pinia instance created with createPinia(). Note that most of the time you won't directly use these functions.