small changes on stores

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

src/composables/useWishlistStore.ts

@@ -6,6 +6,15 @@ import { useFetch } from './useFetch'
 import { syncRef } from '@vueuse/core'
 
 const state = ref<Wishlist>()
+const isFinished = ref<boolean>(false)
+const error = ref<any>()
+
+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<void> => {
   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,

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<Wishlist[]>([])
+const isFinished = ref<boolean>(false)
+const error = ref<any>()
+
+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,

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

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()
 </script>
 
 <template>