에러 처리하기

에러처리는 왜 하는가?
 : 매번 비동기 작업에서 catch 써가면서 하기가 불편하므로 이것만 쓰면 catch가 되게끔 하는 것인데, 
vue에서는 글로벌로 그것들을 소화할 수 있다.  main.js 에서 선언만 해주면 되는데 이것또한 파일(error.js)을 새로 만들어서 따로 관리할 것이다. 

---

toast 설치 : snackbar 를 편히 사용할 수 있도록 만들어 놓은 모듈이다.

$yarn add vuetify-toast-snackbar

---

vuetify.js

VSnackbar, VBtn, VIcon 는 a-la-carte가 인지하지 못하므로 추가해야 한다.

import Vue from 'vue'

//추가로 import 해준다.
import Vuetify, { VSnackbar, VBtn, VIcon } from 'vuetify/lib'
import VuetifyToast from 'vuetify-toast-snackbar'


//여기에 VSnackbar, VBtn, VIcon 명시해야 사용가능함.
Vue.use(Vuetify, {
  components: {
    VSnackbar,
    VBtn,
    VIcon
  }
})
//안의 값을 임의로 바꿀 수 있다.
Vue.use(VuetifyToast, {
  x: 'right', // default
  y: 'bottom', // default
  color: 'info', // default
  icon: 'mdi-information',
  iconColor: '', // default
  classes: [
    'body-2'
  ],
  timeout: 3000, // default
  dismissable: true, // default
  multiLine: false, // default
  vertical: false, // default
  queueable: false, // default
  showClose: false, // default
  closeText: '', // default
  closeIcon: 'close', // default
  closeColor: '', // default
  slot: [], // default
  shorts: {
    custom: {
      color: 'purple'
    }
  },
  //$toast 는 이제 전역변수로 어디서든 사용가능하게 되었다.
  property: '$toast' // default
})

export default new Vuetify({
})

---

error.js

import Vue from 'vue'

//vue에서 제공하는 errorHandler를 사용할 것이다.
Vue.config.errorHandler = e => {
  console.error(e.message)
  //toast사용한다.
  Vue.prototype.$toast.error(e.message)
  console.log('here')
}

---

main.js 에서 import 하기