vuex로 쓸 수 있는 state에 대해 알아본다.

vuex를 npm으로 설치하고,

 

src파일 안에 store.js를 만들어주자.

 

요렇게 만들면되는데,

 

역시 여기서도 router.js랑 비슷하게

 

npm으로 설치한 vuex라이브러리에서 createStore라는 함수를 import하고,

 

store 변수를 createStore 함수로 만들어준다.

 

그리고 createStore 함수의 인자에 우리가 사용할 전역 state변수와 mutations이라는 state 변수를 조작하는 메소드들의 모임을 정의해주면된다.

 

그리고 맨 밑에는 store 변수를 main.js가 사용할 수 있도록 export해주는 로직으로 짜여있다.

 

그리고 export 한 store 변수를 main.js에서 위 사진처럼 import해

 

app 변수가 store를 쓸 수 있게 만들어주면 끝.

 

 

 

저 store에 등록된 변수들은 모든 컴포넌트에서 밑의 사진처럼 $store.변수명으로 접근가능한데

(script에서는 this.$store.변수명),

 

 

컴포넌트에서 변수들의 값을 직접적으로 조작하면 유지보수에 큰 악영향을 미친다.

 

그래서 조작을 하는 함수들은 mutations에 정의하고, 컴포넌트에서는 mutations에 있는 해당 함수에 대한 조작을 요청하는 코드만 작성한다.

 

해당 코드는 this.$store.commit('mutations의 메소드명');

 

이렇게 요청하면되고

 

필요한 경우 인자를 넣고싶다면 메소드명 뒤에 인자를 넣으면된다.

 

그리고 그 인자는 메소드에서 (state, payload) 이런식으로 받으면 된다.