Pinia — управление состоянием во Vue

npm install pinia

// main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";

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

// stores/counter.ts
import { defineStore } from "pinia";

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

<script setup lang="ts">
import { useCounterStore } from "../stores/counter";

const store = useCounterStore();
// store.count, store.double, store.increment()
</script>

<template>
  <p>Счёт: {{ store.count }}</p>
  <p>Удвоенный: {{ store.double }}</p>
  <button @click="store.increment">+1</button>
</template>

import { storeToRefs } from "pinia";

const store = useCounterStore();
const { count, double } = storeToRefs(store);  // ref-ы, реактивны
const { increment } = store;                   // action можно просто так

// stores/cart.ts
import { defineStore } from "pinia";

interface CartItem { id: number; title: string; price: number; qty: number }

export const useCartStore = defineStore("cart", {
  state: () => ({ items: [] as CartItem[] }),

  getters: {
    total(state): number {
      return state.items.reduce((sum, i) => sum + i.price * i.qty, 0);
    },
    count(state): number {
      return state.items.reduce((sum, i) => sum + i.qty, 0);
    }
  },

  actions: {
    add(item: CartItem) {
      const found = this.items.find(i => i.id === item.id);
      if (found) found.qty += item.qty;
      else this.items.push({ ...item });
    },
    remove(id: number) {
      this.items = this.items.filter(i => i.id !== id);
    }
  }
});

// stores/users.ts
import { defineStore } from "pinia";

export const useUserStore = defineStore("users", {
  state: () => ({
    list: [] as User[],
    loading: false,
    error: null as string | null
  }),

  actions: {
    async fetchUsers() {
      this.loading = true;
      this.error = null;
      try {
        const res = await fetch("/api/users");
        this.list = await res.json();
      } catch (e: any) {
        this.error = e.message;
      } finally {
        this.loading = false;
      }
    }
  }
});

// в компоненте при монтировании
onMounted(() => store.fetchUsers());

interface AuthState {
  user: { id: number; name: string } | null;
  token: string | null;
}

export const useAuthStore = defineStore("auth", {
  state: (): AuthState => ({ user: null, token: null }),
  getters: {
    isAuth: (s) => !!s.token
  },
  actions: {
    login(name: string) {
      this.user = { id: 1, name };
      this.token = "fake-jwt-token";
    },
    logout() {
      this.user = null;
      this.token = null;
    }
  }
});

npm install pinia-plugin-persistedstate

// main.ts
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

pinia.use(piniaPluginPersistedstate);

// в store достаточно добавить настройку
export const useCartStore = defineStore("cart", {
  state: () => ({ items: [] as CartItem[] }),
  persist: true
});

export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  const double = computed(() => count.value * 2);

  function increment() {
    count.value++;
  }

  return { count, double, increment };
});

export const useCartStore = defineStore("cart", {
  actions: {
    checkout() {
      const auth = useAuthStore();         // другой store
      const orders = useOrdersStore();
      if (!auth.isAuth) return;
      orders.create(this.items);
      this.items = [];
    }
  }
});

// router.ts — за пределами компонентов
import { useAuthStore } from "@/stores/auth";

router.beforeEach(() => {
  const auth = useAuthStore(pinia);
  if (!auth.isAuth) return "/login";
});

import { createPinia, setActivePinia } from "pinia";

beforeEach(() => {
  setActivePinia(createPinia());
});

it("увеличивает счётчик", () => {
  const store = useCounterStore();
  store.increment();
  expect(store.count).toBe(1);
});

// сохранять корзину при каждом изменении, минуя компоненты
store.$subscribe((mutation, state) => {
  localStorage.setItem("cart:items", JSON.stringify(state.items));
});

// логирование действий: имя, аргументы, результат
store.$onAction(({ name, args, after, onError }) => {
  console.log(`action: ${name}`, args);
  after((result) => console.log(`done: ${result}`));
  onError((error) => console.error(error));
});

src/stores/
├── auth.ts          // сессия, токен, права
├── cart.ts          // состав корзины, суммы
├── catalog.ts       // товары, фильтры, пагинация
└── ui.ts            // модалки, тосты, тема

actions: {
  async fetchCatalog(force = false) {
    if (!force && this.items.length) return;      // свежие данные уже есть
    this.loading = true;
    this.items = await api.get("/catalog");
    this.loading = false;
  },

  async removeItem(id) {
    const removed = this.items.find(i => i.id === id);
    this.items = this.items.filter(i => i.id !== id);  // оптимистично
    try {
      await api.deleteItem(id);
    } catch {
      this.items.push(removed);                         // откат
    }
  }
}

import { createPinia } from "pinia";
app.use(createPinia());   // иначе DevTools не обнаружит store

export const useCheckoutStore = defineStore("checkout", {
  state: () => ({
    draft: { email: "", address: "" },
    saving: false
  }),
  getters: {
    isDirty: (s) => !!s.draft.email || !!s.draft.address
  },
  actions: {
    setField(field, value) { this.draft[field] = value; },
    async submit() {
      this.saving = true;
      try { await api.placeOrder(this.draft); }
      finally { this.saving = false; }
    },
    reset() { this.$reset(); }
  }
});

import { defineStore, shallowRef, markRaw } from "pinia";

export const useEditorStore = defineStore("editor", {
  state: () => ({
    doc: markRaw(new EditorApi()),   // класс-хелпер вне реактивности
    layers: shallowRef([])           // массив заменяется целиком
  })
});

// было:  this.$store.dispatch("cart/add", item)
// стало:
const cart = useCartStore();
cart.add(item);