시작부터 vuex의 store를 사용한다.
src/store/index.js 에서
state 안에 video dataset(videos)을 선언해둔다.
Home.vue 에서 videos 를 사용하는데
style 관련해서 sass 를 사용하므로 두개의 모듈을 추가로 설치한다
npm i sass-loader 로 최신버전을 깔았더니...
Syntax Error: TypeError: this.getOptions is not a function 에러가 나네... 쩝.
이런경우 npm uninstall sass-loader 로 삭제하고 10버전을 설치한다.
vue랑 sass-loader 버전이 호환되지 않는 경우가 있다고 하네...
npm install --save sass-loader@10
npm i node-sass
src/views/Home.vue 를 수정한다.
video dataset 이 목록으로 나오는 것을 확인할 수 있다.
이제 목록을 클릭하면 상세로 들어가자.
보통은 VideoWatchList -> VideoWatchDetail 과 같이 목록에서 상세로 가는데
Home 화면에 목록이 나오므로 VideoWatch화면을 상세로 사용하자.
그러기 위해서는 목록에서 값을 상세로 넘겨줘야하는데...
일단 화면의 링크를 클릭해봤는데 video watch화면이 나오네?? 흠...
src/route/index.js
path에 id를 받을 수 있게 :id 를 추가하고, params: true 로
url에 id가 넘어올 것이므로
VideoWatch.vue 에서 id를 이용해 store의 state 안에 있는 videos 에서 id로 값을 가져오게 한다.
computed에서 video라는 function을 정의하고
this.$store.state 로 state값에 접근하여 videos를 찾는다.
이때 this.$route.params.id 를 Number()로 감싸서 숫자로 바꾸어 주는데
이유는 videos 에 id 가 숫자로 되어있기 때문이다.
Number()로 감싸지 않으면 숫자와 문자를 비교하게 되어 return되는 값이 없다.
id를 '1' 과 같이 문자로 처리하면 Number()로 감싸줄 필요 없다.
결과는 this.$route.params.id 를 넘겨서 state.videos 에서 id에 해당하는 값을 가져왔다.
참고1.
console.log(this.$store.state.videos) 를 찍었을 때
data가 Proxy 아래로 나타나게 되는데 이것은 상관하지 않아도 된다.
똑같이 array며 표현만 저렇게 된 것임.
참고2
store/index.js 에 videos 를 선언한 것은 vuex 3.x 형 표현이다.
vuex 4.x 로 하면 형태가 조금 다른데 3.x 대 형태도 문제없이 동작한다.
