store 사용법 + 예외처리 axios.isAxiosError 사용법 + toasted 사용법

pages/instructor/course/_id/manage.vue

@@ -18,7 +18,7 @@
             openBtnClass="button is-primary is-inverted is-medium is-outlined"
             title="Make Course Hero"
             @opened="applyCourseValues"
-            @submitted="() => {}">
+            @submitted="createCourseHero">
             <div>
               <form>
                 <div class="field">
@@ -42,7 +42,7 @@
                     placeholder="Get all of the course for 9.99$">
                 </div>
                 <div class="field">
-                  <label class="label">Course image</label>
+                  <label class="label">Hero image</label>
                   <span class="label-info">Image in format 3 by 1 (720 x 240)</span>
                   <input
                     v-model="courseHero.image"
@@ -168,6 +168,17 @@ export default {
     })
   },
   methods: {
+    async createCourseHero({closeModal}) {
+      const heroData = {...this.courseHero}
+      heroData.product = {...this.course}
+      try {
+        await this.$store.dispatch('hero/createHero', heroData)
+        closeModal()
+        this.$toasted.success('Course Hero was created!', {duration: 3000})
+      } catch (error) {
+        this.$toasted.error('Course Hero not created!', {duration: 3000})
+      }
+    },
     handleCourseUpdate({value, field}){
       this.$store.dispatch('instructor/course/updateCourseValue', {field, value})
     },

store/hero.js

@@ -0,0 +1,22 @@
+export const state = () => ({
+  item: null
+})
+
+
+export const actions = {
+  async createHero({commit, state}, courseHeroData) {
+    const hero = await this.$axios.$post('/api/v1/product-heroes', courseHeroData)
+    if(hero.isAxiosError === true){
+      console.log(data.data)
+      return Error('')
+    }
+    commit('setHero', hero)
+    return state.item
+  }
+}
+
+export const mutations = {
+  setHero(state, hero) {
+    state.item = hero
+  }
+}