• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

vue router 관련한 질문입니다.

20.05.15 20:53 작성 조회수 117

0

vue router 학습 중에 궁금한 점이 생겨 질문 드립니다.

다른 게임들도 링크를 만들었는데 틱택토와 지뢰찾기는 동작이 하지 않습니다. Cannot read property 'state' of undefined 에러 메시지로 보아 vuex store와 관련된 문제인 것 같은데 맞나요? 정확히 왜 틱택토와 지뢰찾기는 동작하지 않는지와 해결하려면 어떻게 해야되는지 알고싶습니다.

답변 1

답변을 작성해보세요.

0

SoonYeong Kweon님의 프로필

SoonYeong Kweon

2020.09.01

저도 같은 질문을 올렸었는데, 답변을 못 찾았다가, 몇 달이 지난 지금 되짚어 보면서 어쩌다 해결해서 제 해결법 공유합니다.

우선, 아예 동작하지 않는 현상을 해결하지 않으셨다면,
1. 우선 router 폴더에도 store.js를 생성해야 합니다.
2. 틱택토, 지뢰찾기에의 각 store 객체 내용물을 router의 store.js에 혼합해서
     입력합니다.
     (테이블 구조로 둘 사이에 동일한 이름의 변수/함수가 많아서 충돌하지 않게
      최대한 다른 이름으로 컴포넌트 및 store.js의 수정이 필요합니다.
      혼합은 나중에 하기로 하고, 우선 원하는 게임의 작동을 확인하기 위해 해당
      store.js를 붙여넣기 하시는 걸 권장합니다.)
3. Router 혹은 GameMatcher 컴포넌트에서 'store' import 및 export.

이후, 제 경우엔 실시간으로 테이블 셀 클릭 결과가 업데이트 되지 않는
현상이 발생했습니다. 예로, 지뢰찾기 start 후, 다른 게임 route 링크를 클릭 후 다시 지뢰찾기를 클릭해야 테이블 생성 확인 가능했습니다.
(새로 고침하면 처음으로 되돌아가므로 업데이트 여부 확인 불가)

일단 추정 원인으로, 
1. vue 컴포넌트들 중 Vuex의 store를 사용하는 것에만 문제 발생.
2. Local (해당 게임의 폴더, router 프로젝트 폴더 외부)에서 store 객체를 
     import/export 하고 있으면서, 
     router 컴포넌트에서도 (혹은 game matcher 컴포넌트)
     store를 import/export 하여, 중복 기능의 충돌로 추정.

해결 방안으로는,
Local 의 import 및 export default의 store 삭제/생략.  (mutations 유지)
===

(X)

import store, { INCREMENT_TIMERINCREMENT_TIMER2CODE } from './store';
...
export default {
    store,
    components: {
        TableComponent,
        MineForm,
   }, ...

(O)

import { INCREMENT_TIMERINCREMENT_TIMER2CODE } from './store';
...
export default {
   // store,
    components: {
        TableComponent,
        MineForm,
   },

===

즉, 정리하자면,
1. router 폴더에 원하는 게임의 store.js를 복사/붙여넣기.
    (다수의 게임에 적용 시, store.js에 혼합. )

2. 각 게임 폴더의 컴포넌트에서 store를 import/export 하지 않도록 설정.

3. router 혹은 gameMatcher에서 store를 import/export 하도록 설정.


모쪼록 이 방법으로 해결이 되어 도움이 되었으면 좋겠습니다.
해결되지 않거나 추가로 궁금한 점이 있으시면 도와 드리겠습니다.