Vue.js: Основы реактивности и работа с состоянием (Vuex/Pinia)

Реактивность — одна из ключевых возможностей Vue.js, которая делает разработку удобной и эффективной. В этой статье разберём:

• Как работает реактивность во Vue 3?
• Разницу между ref и reactive
• Управление глобальным состоянием с помощью Pinia (преемник Vuex)

1. Что такое реактивность во Vue?

Реактивность — это автоматическое обновление интерфейса при изменении данных. Vue 3 использует Proxy (в отличие от Vue 2, где применялся Object.defineProperty), что делает систему более гибкой и производительной.

Пример реактивности

import { ref, reactive } from 'vue';

const count = ref(0); // Примитив (number, string, boolean)
const user = reactive({ name: 'Alex', age: 25 }); // Объект

// Изменяем данные – Vue автоматически обновляет интерфейс
count.value++; // Для ref обращаемся через .value
user.age = 26; // Для reactive изменяем напрямую

🔹 ref – работает с примитивами, требует .value.
🔹 reactive – для объектов и массивов, изменяется напрямую.

2. Когда использовать ref, а когда reactive?

Совет:

• Используйте ref для простых значений.
• reactive – для сложных структур (формы, состояние компонента).

3. Глобальное состояние: Vuex vs Pinia

Когда приложение растёт, данные нужно хранить централизованно. Раньше использовали Vuex, но сейчас рекомендуют Pinia – более простой и современный вариант.

Установка Pinia

npm install pinia

Создание хранилища

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

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

Использование в компоненте

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

const counter = useCounterStore();
</script>

<template>
  <div>
    <p>{{ counter.count }}</p>
    <button @click="counter.increment()">+1</button>
    <p>Удвоенное значение: {{ counter.doubleCount }}</p>
  </div>
</template>

Плюсы Pinia перед Vuex:

✅ Нет мутаций – только actions и getters.
✅ Поддержка TypeScript из коробки.
✅ Более простой синтаксис (как Composition API).

Вывод

• Реактивность во Vue 3 работает на Proxy, используйте ref и reactive в зависимости от типа данных.
• Pinia – лучший выбор для управления состоянием: проще Vuex и удобнее в использовании.

Попробуйте применить эти концепции в своём проекте! 🚀

Что дальше?

• Официальная документация Pinia
• Разница между Options API и Composition API