Как мутируется state во Vue?

Мутация State во Vue 3

Vue 3 использует реактивную систему на основе JavaScript Proxy для отслеживания изменений данных. State мутируется путём прямого изменения объекта, который был обёрнут функцией reactive() или ref().

Основные способы мутации

1. Использование reactive()

Функция reactive() создаёт глубокую реактивную копию объекта. Любые изменения свойств автоматически отслеживаются и вызывают переrender компонента.

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: {
    name: 'John',
    age: 30
  }
});

// Мутация простого свойства
state.count = 1;

// Мутация вложенного объекта
state.user.name = 'Jane';
state.user.age = 31;

// Добавление нового свойства
state.newProp = 'value';

2. Использование ref()

Функция ref() оборачивает значение в объект с свойством .value. Для примитивных типов это необходимо для реактивности.

import { ref } from 'vue';

const count = ref(0);
const message = ref('Hello');
const items = ref([1, 2, 3]);

// Мутация через свойство .value
count.value = 10;
message.value = 'World';

// Для массивов можно использовать как в JavaScript
items.value.push(4);
items.value[0] = 100;

Мутация массивов

Vue отслеживает мутации массивов, но следует использовать методы, которые Vue распознаёт:

const items = reactive([1, 2, 3]);

// Правильные способы мутации:
items.push(4);           // Добавить элемент
items.pop();             // Удалить последний
items.shift();            // Удалить первый
items.unshift(0);        // Добавить в начало
items.splice(1, 1, 99);  // Удалить и вставить

// Присваивание по индексу работает через Proxy
items[0] = 100;

Мутация объектов

const user = reactive({
  name: 'John',
  email: 'john@example.com'
});

// Изменение существующего свойства
user.name = 'Jane';

// Добавление нового свойства
user.phone = '+1234567890';

// Удаление свойства
delete user.phone;

Важные моменты

Glubokaya reaktivnost': reactive() i ref() rabotayut s vlozhennyimi ob''ektami i massivami avtomaticheski. Vue ispolzuet Proxy, poetomu mutaciya otslezhivayetsya tolko dlya dostupnykh putey. V komponentakh v <script setup> prosto prisvaivay znacheniya, Vue avtomaticheski sozdast reaktivnost'.