1. state
Vue.js의 data속성과 유사한 기능을 가지고 있다. Vuex Store안에서 필요한 데이터를 만들 때 State라는 속성을 선언하고 그 아래에 데이터를 선언해주면 된다.
호출 방법은 script부분에서 호출할 때나 template부분에서 호출할 때 크게 다르지 않다.
왼쪽은 모듈로 따로 빼낸 경우와 그렇지 않은 경우 두 가지이다 모듈이라는 것은 store의 저장소 이름을 정해준다고 생각하면 된다. 모듈로 따로 분리시켰을 때는 호출할 때 모듈이름을 꼭 같이 붙여줘야 한다.
오른쪽은 Vuex Store 안에서 저장된 State를 직접 호출할 수도 있다 this키워드를 붙여도 되고 안해도 된다.
2. Getters
Vue.js의 computed 속성과 굉장히 유사한 기능을 가지고 있다. 모든 컴포넌트에서 computed 속성을 통해 데이터를 가공시켜주기 번거롭고, 같은 작업을 반복해야 하니까 Vuex Store의 Getters라는 부분에서 동일한 계산식이 필요한 데이터들은 미리 만들어 놓고 호출해버리는 방식을 채택했다.
3. Mutations
Vue.js의 methods속성과 유사한 기능을 가지고 있다. mutations가 기능을 갖는 것은 맞지만, 아주 특정한 기능만 갖는다. Vuex내에 선언된 state를 변경시켜주는 기능을 가지고 있다.
mutations를 호출할 땐 commit이라는 메서드를 활용해서 위의 increament처럼 그 mutations의 이름을 선언해주고 필요에 따라 외부에서 payload라는 임의의 데이터값을 받아와서 그 임의의 값을 변경된 state에 담아줄 때 Payload라는 이름을 활용해주면 된다
4. actions
actions도 기존의 Vue.js의 methods 속성과 유사한 기능을 갖고 있는데, mutations와는 다르게 state를 변경시키는 기능을 하진 않고, 전체적으로 큰 흐름의 API호출이나 비동기적 데이터를 처리해야하는 로직을 다룰 때 혹은 이 모든 것들을 통틀어 일련의 과정을 다룰 때 주로 사용을 한다.
Vuex 내에서 정의된 actions를 Vue 컴포넌트 내에서 호출할 땐 dispatch라는 메서드를 선언해서 commit과 마찬가지로 액션이름과 payload를 선언하여 활용할 수 있다.
공식문서도 한 번 살펴보는 것을 추천한다.