Пропала реактивность при отделении логики в Composition API
Всем привет.
Начал рефактирить код под Composition API, вынося логику в сервисы.
И столкнулся с трудностью.
У меня есть свойство которое я вынес в сервис
const switchAdd = ref(false)
Это свойство содержит, значение в зависимости от которого отрисовываются элементы в компоненте.
Пока это свойство было внутри компонентиа проблем не было.
Но, после того как я вынес его в отдельный сервис и продключил вот так в компоненте :
import serviceAbonent from '@/services/abonent'
... const { swithAdd } = = serviceAbonent()
у свойства пропала реактивность. Я добавил логи и при клике на кнопку, которая меняет значение этого свойства значение изменяется в сервисе, но не изменяется в компоненте.
Нокже сломались еще некоторые свойства, но думаю, если поможете в чем проблема с этим свойством, то смогу и остальные исправить.
Ответы (1 шт):
Возможно, функция неправильно экспортирована из serviceAbonent.js
Если serviceAbonent экспортирован не по дефолту, то при импорте в компоненте деструктуризуем (import { serviceAbonent } from '@/services/abonent')
Либо надо было написать в serviceAbonent.js: export default function serviceAbonent...
Пример https://codesandbox.io/s/crimson-leaf-esvbm1?file=/src/App.vue