How to Create Store in Pinia for Vue 3

To create a store in Pinia, use the defineStore function by giving your store a unique ID and returning state, getters, and actions inside it. Then, use this store in your Vue components by calling the store function.

Syntax

The defineStore function creates a store with a unique ID. Inside, you return an object with state (data), getters (computed values), and actions (functions to change state).

Example parts:

• id: unique name for the store
• state: a function returning reactive data
• getters: computed properties based on state
• actions: methods to update state

javascript

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

Example

This example shows a simple counter store with state, getter, and action. You can use it in a Vue component to display and update the count.

javascript

import { createApp } from 'vue'
import { createPinia, defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    doubleCount: (state) => state.count * 2
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

const app = createApp({
  setup() {
    const counter = useCounterStore()
    return { counter }
  },
  template: `
    <div>
      <p>Count: {{ counter.count }}</p>
      <p>Double: {{ counter.doubleCount }}</p>
      <button @click="counter.increment">Increment</button>
    </div>
  `
})

app.use(createPinia())
app.mount('#app')

Output

Count: 0
Double: 0
[Button labeled 'Increment']

When clicking the button, Count increases by 1 and Double updates accordingly.

Common Pitfalls

• Not calling createPinia() and adding it to the Vue app with app.use() causes the store to not work.
• Using the same id for multiple stores leads to conflicts.
• Forgetting to call the store function (useStore()) inside components prevents access to state.
• Mutating state outside actions can cause unexpected behavior.

javascript

/* Wrong: Not using createPinia */
import { createApp } from 'vue'
import { defineStore } from 'pinia'

const useStore = defineStore('main', {
  state: () => ({ value: 1 })
})

const app = createApp({
  setup() {
    const store = useStore() // This will fail without pinia plugin
    return { store }
  }
})

app.mount('#app')

/* Right: Use createPinia and app.use */
import { createPinia } from 'pinia'

const pinia = createPinia()
app.use(pinia)

Quick Reference

Remember these key points when creating a Pinia store:

• defineStore(id, options): Create a store with unique id.
• state(): Returns reactive data object.
• getters: Computed properties based on state.
• actions: Methods to update state.
• Use createPinia() and add it to your Vue app with app.use().

Key Takeaways

Use defineStore with a unique ID to create a Pinia store.

Always call createPinia() and add it to your Vue app with app.use().

Return state as a function to keep data reactive and isolated.

Use getters for computed values and actions for changing state.

Call the store function inside components to access state and actions.