Creating a Pinia store in Vue

Introduction

A Pinia store helps you keep and manage data in one place for your Vue app. It makes sharing data easy and organized.

You want to share data between different Vue components.

You need to keep track of user login status across pages.

You want to manage a shopping cart in an online store app.

You want to update data in one place and see changes everywhere.

You want a simple way to organize app state without confusion.

Syntax

Vue

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => ({
    // your data here
  }),
  getters: {
    // computed properties here
  },
  actions: {
    // functions to change state here
  }
})

defineStore creates a store with a unique ID.

state is a function returning an object holding your data.

Examples

A simple counter store with a number and a function to add one.

Vue

import { defineStore } from 'pinia'

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

A user store with data, a message getter, and a login action.

Vue

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', loggedIn: false }),
  getters: {
    welcomeMessage: (state) => `Hello, ${state.name}`
  },
  actions: {
    login(name) {
      this.name = name
      this.loggedIn = true
    }
  }
})

Sample Program

This example shows a simple todo list using a Pinia store. You can add todos and toggle their done status. The store keeps the list and updates it for the app.

Vue

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

// Create a store
export const useTodoStore = defineStore('todo', {
  state: () => ({
    todos: []
  }),
  actions: {
    addTodo(text) {
      this.todos.push({ text, done: false })
    },
    toggleTodo(index) {
      this.todos[index].done = !this.todos[index].done
    }
  }
})

// Vue app component
const App = {
  template: `
    <div>
      <h1>Todo List</h1>
      <input v-model="newTodo" @keyup.enter="add" placeholder="Add todo" aria-label="Add todo" />
      <ul>
        <li v-for="(todo, i) in todoStore.todos" :key="i">
          <label>
            <input type="checkbox" v-model="todo.done" />
            <span :style="{ textDecoration: todo.done ? 'line-through' : 'none' }">{{ todo.text }}</span>
          </label>
        </li>
      </ul>
    </div>
  `,
  setup() {
    const todoStore = useTodoStore()
    const newTodo = ref('')

    function add() {
      if (newTodo.value.trim()) {
        todoStore.addTodo(newTodo.value.trim())
        newTodo.value = ''
      }
    }

    return { todoStore, newTodo, add }
  }
}

// Create app and use Pinia
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.mount('#app')

Important Notes

Always give your store a unique ID string in defineStore.

Use actions to change state safely and keep code organized.

Pinia works well with Vue 3 and Composition API for clean code.

Summary

Pinia stores hold shared data for Vue apps.

Define state, getters, and actions inside defineStore.

Use stores to keep your app data organized and easy to update.