인프런 커뮤니티 질문&답변

bin

작성한 질문수

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

$route, $store 질문

작성

261

$route, $store는 actions나 mutations 내에서 사용이 불가능한가요??

아래소스처럼 actions 내에서 this.$store.state.news 를 호출할때

TypeError: Cannot read property 'state' of undefined와 같은 오류가 발생합니다..

NewsViews.vue

<template>
<div>
</div>
</template>

<script>
export default {
created() {
this.$store.dispatch('FETCH_NEWS')
}
}

sotre/actions.js

import { fetchNewsList } from '../api/index.js'
export default {
   FETCH_NEWS(context) {
      fetchNewsList()
         .then(response => {
              context.commit('SET_NEWS', response.data);
              alert(this.$store.state.news)
        }
    }
}

javascript vuejs

답변 1

캡틴판교

지식공유자

안녕하세요 bin님, 좋은 질문이네요. 뷰 컴포넌트 옵션 속성 내부에서 this.$store나 this.$route를 접근할 수 있는 이유는 new Vue()라는 인스턴스를 생성할 때 라우터와 뷰 스토어를 각각 연결해줬기 때문입니다. 이 관점에서 actions.js 라는 파일은 그냥 자바스크립트 파일이기 때문에 `this`로 해당 속성들을 접근할 수 없습니다. 아마 가장 쉽게 이해하시려면 액션 함수 안에서 콘솔로 this를 찍어보시면 가장 빠르게 차이점을 보실 수 있을거에요. 액션에서 만약 스토어의 state를 접근하시고 싶다면 context에서 제공하는 state를 이용하시면 좋을 것 같아요.

만약 라우터를 접근하시고 싶다면 라우터를 해당 파일에서 아래와 같은 느낌으로 임포트 해와서 사용하시면 좋을 것 같습니다.

import router from '@/router/index.js'

router.push('/login');

수강해 주셔서 감사합니다 :)

bin

작성한 질문수

전체 Q&A

질문하기