vue.js 에서 router 호출 전 store 에 저장하기

<script>
export default {
  data() {
    return {
      myData: null
    }
  },
  beforeRouteEnter(to, from, next) {
    // API 호출
    axios.get('/api/my-data')
      .then(response => {
        // 데이터 저장
        next(vm => vm.myData = response.data)
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

 

beforeRouteEnter 로 router 를 타기전 호출 할수 있는 방법으로 

to 와 from 에는 아래와 같은 속성을 담고 있다. 

 

name: 현재 라우트의 이름
path: 현재 라우트의 경로
hash: URL의 해시 값
query: URL의 쿼리 파라미터 객체
params: URL의 동적 라우트 매개변수 객체
meta: 현재 라우트의 메타 데이터 객체

 

아래는 router 타기전 api 를 호출 하고 store 에 함수를 호출 하여 

값을 저장 하는 로직을 보여주고 있다. 

 

import store from '@/store'

export default {
  data() {
    return {
      myData: null
    }
  },
  beforeRouteEnter(to, from, next) {
    // API 호출
    axios.get('/api/my-data')
      .then(response => {
        // 데이터 저장
        store.commit('SET_MY_DATA', response.data)
        next()
      })
      .catch(error => {
        console.log(error)
      })
  }
}