Пропала реактивность при отделении логики в Composition API

Всем привет.

Начал рефактирить код под Composition API, вынося логику в сервисы.

И столкнулся с трудностью.

У меня есть свойство которое я вынес в сервис

  const switchAdd = ref(false)

Это свойство содержит, значение в зависимости от которого отрисовываются элементы в компоненте.

Пока это свойство было внутри компонентиа проблем не было.

Но, после того как я вынес его в отдельный сервис и продключил вот так в компоненте :

import serviceAbonent from '@/services/abonent'
... const { swithAdd } = = serviceAbonent()

у свойства пропала реактивность. Я добавил логи и при клике на кнопку, которая меняет значение этого свойства значение изменяется в сервисе, но не изменяется в компоненте.

Нокже сломались еще некоторые свойства, но думаю, если поможете в чем проблема с этим свойством, то смогу и остальные исправить.


Ответы (1 шт):

Автор решения: Alina

Возможно, функция неправильно экспортирована из 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

→ Ссылка