구로구 아닌 부로구

컴포넌트끼리 통신을 하기 위해 props와 $emit 같은 아이들을 사용하고

좀 더 복잡한 관계를 위해 provide/inject 를 사용한다고 했었더랬지...

그리고 대규모라면? 더더더 복잡하다면...

중앙집중식 저장소 역할을 하는 Vuex가 있다.

(예전에 투비소프트 제품에서 글로벌데이터셋과 비슷한 느낌)

처음에 프로젝트 생성할때 지정해도 되고~(추천)

npm install vuex 해도 되고~

자주 사용되는 코드 데이터나, 사용자 정보등을 담아주면 편하겠지 싶은...

처음 생성시 지정하면 알아서 store라는 폴더와 그 안에 기초적인 내용물이 생성되고,

main.js 에선 

import store from './store'

위와 같은 코드를 포함 하고 있게 된다.

1. state

사용할 변수들을 지정하는 곳!

사용 방법은 아주 간단하다.

2. mutations

이거 잘 모르겠다...

state에 저장된 값을 바꾸려면 직접 바꾸지 말고 이걸 쓰라는데...

직접 바꿔짐...

(strict를 true로 하면 오류남. 근데 운영모드에선 이거 하면 값 변경 감지에 따른 성능에 이슈가 있다고 하니...)

값 변경에 따른 추적을 위해서 라고 하는데~~

여튼 직접 바꾸지말고 이걸 사용하는걸로, 

페이로드 전달이 가능하고 동기방식이라고함.

포인트는 state의 값을 변경 한다는 점!

3. getters

이건 computed를 생각하면 된다.

기존 데이터(state)를 활용한 추가연산의 로직이 있는 경우 해당 로직을 반복사용하기보단...

computed를 쓰듯이, getters를 활용하면 되는!

4. actions

mutations와 비슷하지만 다른!

비동기 처리를 위주로 하고 state를 직접 변경하는 것이 아닌, 내부에서 mutations을 호출하는 형태로 사용한다.

state와 mutations가 뭔가 private한 느낌이라면

getters와 actions는 public한 느낌이랄까?

간단한 게시판 위주의 커뮤니티 같은 사이트를 제작하려 했으나, 

당분간 일이 바빠질 예정으로 미뤄야 할듯...ㅠ