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

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

우선, 아예 동작하지 않는 현상을 해결하지 않으셨다면,
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)

(O)

===

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

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

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

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