vue-state-management

Vue 3 State Management Patterns

Same intuition as react-state-management. Pinia replaces Vuex for Vue 3.

Decision tree

Data	Tool
Local component state (count, isOpen)	ref, reactive
Shared between siblings	Lift to common parent + props
Composable shared logic	composable returning { refs, actions }
App-wide state (current user, theme)	Pinia or provide/inject
Complex domain state	Pinia
Server data with caching	TanStack Query Vue (@tanstack/vue-query)
Form state	vee-validate (see vue-forms)
URL-synced state	vue-router useRoute().query + useRouter().push

ref and reactive (covered in vue-conventions)

For component-local state, prefer ref (works for primitives + objects, no destructure footgun).

Composables for shared logic

// src/composables/useCounter.ts
import { ref, computed } from 'vue';

export function useCounter(initial = 0) {
  const count = ref(initial);
  const double = computed(() => count.value * 2);
  function increment() { count.value++; }
  function reset() { count.value = initial; }
  return { count, double, increment, reset };
}

Each useCounter() call creates a fresh state — composables don't share state by default. For shared state across components, use Pinia.

Pinia (Vue 3 default)

pnpm add pinia. Setup once in main.ts:

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

const app = createApp(App);
app.use(createPinia());
app.mount('#app');

Setup syntax (preferred for Vue 3)

// src/stores/users.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import type { User } from '@/types/user';

export const useUserStore = defineStore('users', () => {
  // state
  const items = ref<User[]>([]);
  const currentUser = ref<User | null>(null);
  const loading = ref(false);

  // getters (computed)
  const count = computed(() => items.value.length);
  const isAuthenticated = computed(() => currentUser.value !== null);

  // actions
  async function fetchUsers() {
    loading.value = true;
    try {
      const res = await fetch('/api/users');
      items.value = await res.json();
    } finally {
      loading.value = false;
    }
  }

  function setCurrentUser(user: User | null) {
    currentUser.value = user;
  }

  return { items, currentUser, loading, count, isAuthenticated, fetchUsers, setCurrentUser };
});