diff --git a/components.d.ts b/components.d.ts index cbe40ef..32eebef 100644 --- a/components.d.ts +++ b/components.d.ts @@ -35,4 +35,4 @@ declare module 'vue' { } } -export {} +export { } diff --git a/src/composables/useWishlistStore.ts b/src/composables/useWishlistStore.ts index bab0eb0..a5bfc4f 100644 --- a/src/composables/useWishlistStore.ts +++ b/src/composables/useWishlistStore.ts @@ -6,6 +6,15 @@ import { useFetch } from './useFetch' import { syncRef } from '@vueuse/core' const state = ref() +const isFinished = ref(false) +const error = ref() + +const fetch = async (slugText: string) => { + const request = await useFetch(`/wishlist/${slugText}`).json() + state.value = request.data.value + isFinished.value = request.isFinished.value + error.value = request.error.value +} const update = async (updatedData: Wishlist): Promise => { const id = state.value?.id @@ -91,10 +100,9 @@ const filteredItems = computed(() => { return state.value.items.filter((item: WishlistItem) => item.bought === false) }) -export const useWishlistStore = (slugText: string) => { - const { isFinished, error, data } = useFetch(`/wishlist/${slugText}`).json() - syncRef(data, state) +export const useWishlistStore = () => { return { + fetch, state, isFinished, error, diff --git a/src/composables/useWishlistsStore.ts b/src/composables/useWishlistsStore.ts index a8a9069..f6f1ae5 100644 --- a/src/composables/useWishlistsStore.ts +++ b/src/composables/useWishlistsStore.ts @@ -1,15 +1,21 @@ import { Wishlist } from '@/types' -import { syncRef } from '@vueuse/core' import { ref } from 'vue' import { useFetch } from './useFetch' const state = ref([]) +const isFinished = ref(false) +const error = ref() + +const fetch = async () => { + const request = await useFetch('/wishlist').json() + state.value = request.data.value + isFinished.value = request.isFinished.value + error.value = request.error.value +} export const useWishlistsStore = () => { - const { isFinished, error, data } = useFetch('/wishlist').json() - syncRef(data, state) - return { + fetch, state, error, isFinished, diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue index cebdd02..03b35c0 100644 --- a/src/views/DetailView.vue +++ b/src/views/DetailView.vue @@ -14,6 +14,7 @@ const { t } = useI18n() const toast = useToast() const { isActive: editModeIsActive } = useEditMode() const { + fetch, state, isFinished, update, @@ -22,7 +23,8 @@ const { itemBought, itemDelete, filteredItems, -} = useWishlistStore(route.params.slug as string) +} = useWishlistStore() +fetch(route.params.slug as string) const title = computed(() => { return state.value?.title diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 2c4cfa1..0b1d687 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -3,7 +3,8 @@ import { useI18n } from 'vue-i18n' import { useWishlistsStore } from '@/composables' const { t } = useI18n() -const { state, isFinished } = useWishlistsStore() +const { state, isFinished, fetch } = useWishlistsStore() +fetch()