$route, $store 질문
263
작성한 질문수 9
$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)
}
}
}
답변 1
0
안녕하세요 bin님, 좋은 질문이네요. 뷰 컴포넌트 옵션 속성 내부에서 this.$store나 this.$route를 접근할 수 있는 이유는 new Vue()라는 인스턴스를 생성할 때 라우터와 뷰 스토어를 각각 연결해줬기 때문입니다. 이 관점에서 actions.js 라는 파일은 그냥 자바스크립트 파일이기 때문에 `this`로 해당 속성들을 접근할 수 없습니다. 아마 가장 쉽게 이해하시려면 액션 함수 안에서 콘솔로 this를 찍어보시면 가장 빠르게 차이점을 보실 수 있을거에요. 액션에서 만약 스토어의 state를 접근하시고 싶다면 context에서 제공하는 state를 이용하시면 좋을 것 같아요.
만약 라우터를 접근하시고 싶다면 라우터를 해당 파일에서 아래와 같은 느낌으로 임포트 해와서 사용하시면 좋을 것 같습니다.
import router from '@/router/index.js'
router.push('/login');
수강해 주셔서 감사합니다 :)
깃 권한 요청 드립니다
0
50
1
깃 권한 신청
0
50
1
깃 권한 요청드립니다.
0
111
1
깃허브 권한 요청 드립니다
0
144
1
깃허브 권한 요청 드립니다
0
161
1
깃허브 권한 요청 드립니다
0
167
1
깃허브 권한 요청 드립니다.
0
154
1
안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.
0
208
1
ide 타입추론 기능 사용할 수 없을까요??
0
207
1
컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??
0
228
1
Vue3로 진행중입니다
1
338
1
Vue router-link 사용시 같은 url이면
1
506
1
vue3 에러 메세지...
1
670
2
id ="app" 중복
0
271
2
use undefined 에러가 나옵니다.
1
318
2
깃허브 권한 요청드립니다.
1
358
2
권한요청드립니다.
1
299
2
Vue3에서 구글 애드센스 탑재하기
1
437
2
코드가 정상 작동 되는건지 ...
1
303
1
강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?
1
243
1
vuex 적용시 질문
1
288
2
라우터 버전이 안맞는데 어떤걸 써야하나요
1
384
2
UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..
1
455
2
권한요청 드립니다!
1
274
2





