Pinia Store Example

How Pinia Stores Work

What is Pinia? Pinia is the official state management library for Vue.js 3. It's lightweight, type-safe (especially with TypeScript), and follows the Composition API patterns.

Store Definition

Stores are defined using defineStore from Pinia. The store 'textStore' manages a reactive array of texts using ref for state, with actions like addText and removeText.

Using the Store in Components

In this component, we call useTextStore() to access the store instance. The reactive texts array is directly bound to the template via const texts = textStore.texts. Changes in the store automatically update the UI due to Vue's reactivity system.

Persistence Across Pages

Pinia stores persist in memory during SPA navigation in Nuxt. When you navigate to another page (e.g., Home) and return, the store state remains intact—no data loss. For true persistence (e.g., across browser refreshes), you could add plugins like pinia-plugin-persistedstate, but here we demonstrate in-memory persistence.

Best Practices Followed

• TypeScript for type safety: ref()
• Reactive state with ref and computed getters
• Actions for mutations: Keep logic in store actions
• Auto-imports in Nuxt: No manual imports needed for defineStore
• Scoped styles for component isolation