Vue toRefs(): збережіть реактивність при destructuring reactive()
Звичайне destructuring властивостей reactive() може від'єднати отримані значення від реактивного об'єкта. toRefs() створює refs, які залишаються пов'язаними з початковим станом.
reactive() робить об'єкт реактивним, але звичайне destructuring дістає поточні значення його властивостей у нові локальні змінні.
Для примітивних значень це може розірвати реактивний зв'язок. Якщо потрібно destructuring і водночас зберегти зв'язок із початковим станом, використовуйте toRefs().
Замість звичайного destructuring використовуйте toRefs()
const state = reactive({ page: 1, search: '',}); const { page, search } = state; state.page = 2; console.log(page); // 1const state = reactive({ page: 1, search: '',}); const { page, search } = toRefs(state); state.page = 2; console.log(page.value); // 2У першому варіанті page отримує число 1. Це окреме локальне значення, тому наступна зміна state.page його не оновлює.
toRefs(state) натомість створює ref для кожної властивості. Такий ref залишається пов'язаним із відповідною властивістю початкового реактивного об'єкта.
Зв'язок працює в обидва боки
const state = reactive({ page: 1, search: '',}); const { page, search } = toRefs(state); page.value = 3; console.log(state.page); // 3 state.search = 'vue'; console.log(search.value); // "vue"Зміна через page.value змінює state.page, а зміна state.search одразу відображається в search.value.
Тобто toRefs() не копіює стан. Він створює refs, які посилаються на властивості реактивного об'єкта.
Коли toRefs() потрібний
- потрібно destructuring кількох властивостей із
reactive(); - ці властивості мають залишатися реактивними;
- потрібно повернути реактивний об'єкт із composable і дозволити зручно destructuring його властивостей.
Якщо ви продовжуєте використовувати state.page і state.search напряму, toRefs() не потрібний.
Звичайне destructuring бере значення з reactive(). toRefs() дає окремі refs, які залишаються пов'язаними з початковим станом.
