Implemented coin purchase-flow

frontend/src/stores/user.js

@@ -1,16 +1,24 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
-import { inject } from 'vue'
+import { inject, ref } from 'vue'
 
 export const useUserStore = defineStore('user', () => {
-
   const API_BASE_URL = inject('apiBaseURL')
+  const coins = ref(0)
 
-  const getCoins = async () => {
-    return await axios.get(`${API_BASE_URL}/users/me/coins`)
+  const fetchCoins = async () => {
+    try {
+      const response = await axios.get(`${API_BASE_URL}/users/me/coins`)
+      coins.value = response.data?.coins || 0
+      return response
+    } catch (error) {
+      console.error('Error fetching coins', error)
+      throw error
+    }
   }
 
   return {
-    getCoins,
+    coins,
+    fetchCoins,
   }
-})
+})