add new method refactor

src/api/merch.js

@@ -1,6 +1,16 @@
 import { apiClient } from '@/services/apiClient.js'
+import router from '@/router/index.js'
 
 export const useMerchApi = () => {
+  const addMerch = async (payload) => {
+    const response = await apiClient.post('/merch/', payload.value)
+    if (response.status === 200) {
+      router.push({ name: 'collection' })
+    } else {
+      console.log("Add merch error: ", response)
+    }
+  }
+
   const deleteMerch = async (uuid) => {
     try {
       const response = await apiClient.delete(`/merch/${uuid}`)
@@ -11,6 +21,7 @@ export const useMerchApi = () => {
   }
 
   return {
+    addMerch,
     deleteMerch,
   }
 }

src/views/AddMerchView.vue

@@ -1,7 +1,9 @@
 <script setup>
 import router from '@/router/index.js'
 import { computed, ref } from 'vue'
-import { apiClient } from '@/services/apiClient.js'
+import { useMerchApi } from '@/api/merch.js'
+
+const { addMerch } = useMerchApi()
 
 const mandarakeLink = 'https://order.mandarake.co.jp/order/listPage/list?soldOut=1&keyword='
 
@@ -59,13 +61,13 @@ const payload = computed(() => {
   }
 })
 
-const addMerch = async () => {
-  const response = await apiClient.post('/merch/', payload.value)
-  if (response.status === 200) {
-    router.push({ name: 'collection' })
-  } else {
-    console.log("Add merch error: ", response)
+const addNewMerch = async () => {
+  try {
+    await addMerch(payload)
+  } catch (error) {
+    console.log(error)
   }
+  router.push({ name: "collection" })
 }
 </script>
 
@@ -98,7 +100,7 @@ const addMerch = async () => {
       </div>
 
       <div class="mt-10 c-center">
-        <n-button class="w360" type="primary" @click="addMerch">Add</n-button>
+        <n-button class="w360" type="primary" @click="addNewMerch">Add</n-button>
       </div>
     </n-form>
   </n-card>