Vue — State

Pinia (recommended)

npm install pinia

// main.js
import { createPinia } from 'pinia'
app.use(createPinia())

Define store

// stores/counter.js
import { defineStore } from 'pinia'

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

Use store

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <p>Count: {{ counter.count }}</p>
  <p>Double: {{ counter.doubleCount }}</p>
  <button @click="counter.increment()">Add</button>
</template>

Vuex (legacy)

// store/index.js
import { createStore } from 'vuex'

export default createStore({
  state: { count: 0 },
  mutations: {
    increment(state) { state.count++ }
  },
  actions: {
    increment({ commit }) { commit('increment') }
  },
  getters: {
    doubleCount: (state) => state.count * 2
  }
})

Use Vuex store

<script>
export default {
  computed: {
    count() { return this.$store.state.count },
    doubleCount() { return this.$store.getters.doubleCount }
  },
  methods: {
    increment() { this.$store.commit('increment') }
  }
}
</script>

Pinia vs Vuex

Feature	Pinia	Vuex
API	Simpler	Complex
TypeScript	Better support	Limited
Mutations	None	Required
DevTools	Full support	Full support

Mini Practice

1. Create a Pinia store
2. Add state, getters, actions
3. Use store in components
4. Compare with Vuex

Up Next

Continue with API Calls - HTTP requests.