Getting Started with Pinia: Installation, Store Creation, and Core Concepts

Introduction

As a front‑end developer you know that state management is a crucial part of daily development. This article introduces Pinia, the new rising star in the Vue ecosystem.

What is Pinia

Pinia, like Vuex, is a state‑management library designed specifically for Vue. It lets you share state across components or pages, offers a simpler API than Vuex, and supports both Vue 2.x and Vue 3.x.

Installation

yarn add pinia

// or using npm
npm install pinia

Creating a Pinia Instance

Create a Pinia instance (the root store) and pass it to the Vue application:

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

const pinia = createPinia()
const app = createApp(App)

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

How to Create a Store

A Store (such as one created with Pinia) is an entity that holds state and business logic. It contains three concepts: State, Getter, and Action, analogous to a component’s Data, Computed, and Methods.

Create a store file src/stores/counter.ts:

// stores/counter.ts

// Options mode
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

// Setup mode
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }
  return { count, increment }
})

The first argument of defineStore is a unique ID that links the store to the devtools. The second argument can be either a setup function or an options object.

State

Using state in a component:

import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()

<script>
// inside template
<div class="greetings">{{counter.count}}</div>
</script>

Modify state directly or with $patch:

// Direct mutation
counter.count++

// Patch (can modify multiple properties)
counter.$patch({
  count: counter.count + 1,
})

Reset state to its initial value:

counter.$reset()

Destructure state (note: loses reactivity unless using storeToRefs):

import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
const { count } = counter

Preserve reactivity with storeToRefs:

import { storeToRefs } from 'pinia'
const counter = useCounterStore()
const { count } = storeToRefs(counter)

Getter

Getters are equivalent to computed properties of the store. They can access the whole store via this, other stores, and can return functions that accept parameters (these are not cached).

import { useOtherStore } from './other-store'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    // Simple computed getter
    doubleCount(state) {
      return state.count * 2
    },
    // Getter with explicit return type
    doublePlusOne(): number {
      return this.doubleCount + 1
    },
    // Access another store's getter
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.count + otherStore.count
    },
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

Action

Actions are similar to component methods; they can be asynchronous and can call other stores’ actions.

import { useAuthStore } from './user'

export const useCounterStore = defineStore('counter', {
  state: () => ({ userInfo: {} }),
  actions: {
    async fetchUserInfo() {
      const auth = useAuthStore()
      if (auth.isAuthenticated) {
        this.userInfo = await fetchUserInfo()
      }
    },
  },
})

Calling an action from a component:

<script setup>
const store = useCounterStore()
// Call the action as a method of the store
store.fetchUserInfo()
</script>

<template>
  <button @click="store.fetchUserInfo()">Click Me</button>
</template>

Conclusion

The above demonstrates the basic usage of Pinia. Compared with Vuex, Pinia’s API is much more concise: it drops mutations and modules, keeping only State, Getter, and Action, and its usage mirrors component Data, Computed, and Methods. It supports TypeScript and is extremely lightweight, with a bundle size of about 1 KB.

Reference

https://pinia.web3doc.top/