예외처리 isAxiosError + 이벤트 submitted + 알림 $toasted 사용법

pages/instructor/heroes/index.vue

@@ -30,6 +30,7 @@
             <td class="modal-td" v-show="false">
             <portal :to="`modal-view-${hero._id}`">
               <Modal
+                @submitted="activateHero($event, hero._id)"
                 :ref="`modal-${hero._id}`"
                 :showButton="false"
                 actionTitle="Make Active"
@@ -77,6 +78,15 @@ export default {
     openModal(modalId) {
       const modal = this.$refs[`modal-${modalId}`][0]
       modal.openModal()
+    },
+    async activateHero({ closeModal },heroId) {
+      try{
+        const result = await this.$store.dispatch('instructor/activateHero', heroId)
+        this.$toasted.success('Hero was succesfuly activated!', {duration: 2000})
+        closeModal()
+      }catch(error){
+        this.$toasted.success('Hero was activated fail!', {duration: 2000})
+      }
     }
   }
 }

store/instructor/index.js

@@ -6,11 +6,20 @@ export const actions = {
   async fetchHeroes({state, commit}) {
     const heroes = await this.$axios.$get('/api/v1/product-heroes')
     if(heroes.isAxiosError === true){
-      console.log(data.data)
+      console.log(heroes.data)
       return Error('')
     }
     commit('setHeroes', heroes)
     return state.heroes
+  },
+  async activateHero({commit}, heroId) {
+    const activeHero = await this.$axios.$patch(`/api/v1/product-heroes/${heroId}`)
+    if(activeHero.isAxiosError === true){
+      console.log(activeHero.data)
+      return Error('')
+    }
+    commit('hero/setHero', activeHero, {root: true})
+    return activeHero
   }
 }