defineStore

defineStore is a function in Pinia, a state management library for Vue 3. It is used to declare stores that hold reactive state, getters, and actions. The function integrates with Vue’s reactivity system and provides a modular approach to managing application state.

There are two main styles for defining a store with defineStore: option stores and setup stores. In an option store, you pass an id and an object describing state, getters, and actions. In a setup store, you pass an id and a setup function that uses Vue’s composition API (ref, computed, etc.) and returns the store’s public API.

Option store example:

export const useCounterStore = defineStore('counter', {

state: () => ({

count: 0

}),

getters: {

doubleCount: (state) => state.count * 2

},

actions: {

increment() {

this.count++

}

}

})

Setup store example:

export const useCartStore = defineStore('cart', () => {

const items = ref([])

const addItem = (item) => items.value.push(item)

return { items, addItem }

})

Usage and lifecycle: after creating a Pinia instance and installing it in a Vue application, components can obtain a store by calling the exported function, e.g., const counter = useCounterStore(). The returned object provides reactive state, getters, and actions. In TypeScript, defineStore offers strong type inference, and the store id (the first argument) must be unique within the application for devtools and tooling integration.

Notes: store names typically follow the useXStore convention and are exported from modules to enable clean imports. defineStore is central to Pinia’s approach to scalable, type-safe state management in Vue applications.

See also: Pinia, Vue.js.