http와 함께 사용한다면

• 만약 우리가 작업하는데 있어 동기작업인 http와 함께 로직을 짜야하는 상황이 온다 가정해보자.

  • 하지만 문제는 mutaions는 언제나 동기식이라는 것인데 mutaions에는 비동기식 코드가 허용되지 않는다.
  • 따라서 mutaions이 실행되면 중단없이 단계별로 실행되면서 state는 즉시 바뀌어야 한다. 더 나중에 바뀌는 것은 허용되지 않는다.

• 이렇게 작동하는 이유는 만약에 여러 mutaions이 실행되면 모든 mutaions이 최신 상태를 받아야만 하기 때문이다.

  • 만약 다른 mutaions이 commit()되고 실행이 완료되지 않는다면 이 상황은 예상하지 못하기 때문에 프로그램에 오류를 발생한다.
    따라서 mutaions의 필수 조건은 동기식으로 동작해야 한다는 것이다.

actions

• Vuex에는 비동기식 코드를 위한 더 나은 개념이 있다. mutations과 getters외에도 액션(Actions)이 있다.

• 컴포넌트는 액션을 트리거하고 이는 mutaion을 commit하여 쓴다.

• actions는 비동기식 코드를 사용할 수 있기 때문에 컴포넌트와 mutations 사이에 actions을 넣는 것은 일반적으로 좋은 방식이라고 여겨진다.

  • 컴포넌트가 mutation을 commit할 수 있지만 말이다.

• 동기식 코드만을 사용한다면 문제될 것이 없고 컴포넌트 내부에서 mutations을 직접 commit()하는 것도 종종 문제가 되진 않는다.

• 그럼에도 action을 사이에 놓는 건 좋은 관행으로 여겨지는데 mutation에 실수로 비동기식 코드를 넣는 것을 방지해주기 때문이다.

const store = createStore({
    state(){
        return{
            counter : 0
        }
    },
    mutations:{
        increament(state){
            state.counter += 2;
        },
        increase(state, payload){
            state.counter += payload.value;
        }
    },
    actions:{
        increment(context){
            setTimeout(function () {
                context.commit('increment');
            },500);
        },
        increase(context, payload){
            setTimeout(function () {
                context.commit('increase', payload);
            },500)
        }
    },
  	getters:{
      ...
    }
  })

• 액션도 객체를 받는다. 액션은 메서드일 뿐이다. increment와 같은 메서드와 같은데 그래서 mutations에서 사용한 이름을 그대로 사용할 수 있다.
  • increment mutations이 있고 increment actions가 있다.
  • 이름을 똑같이 만들 필요는 없지만 컴포넌트와 mutations 사이에 actions을 종종 넣기 때문에 이 둘의 이름은 종종 같을 것이다. 즉, 같은 이름을 쓰는 게 직관적이다.
• action은 객체를 인수로 받습니다 context라는 객체이다.
  • context 객체는 아주 흥미로운데 다른 Vuex 기능과 마찬가지로 Vuex가 이 인수를 자동으로 가져온다
  • context는 호출할 수 있는 commit 메서드가 있다. 앞서 배운대로 mutations을 commit()한다. 컴포넌트 내부에서 커밋하는 것과 같다.
• 참고로 두 번째 인수로 payload를 전달할 수 있고 다른 방식으로는 객체를 전달하여 두 개의 인수를 사용할 수 있다.

actions 사용

export default {
    components: {
    	...
    },
    methods: {
        addOne() {
            this.$store.commit({
                type: "increase",
                value:10
            })
        }
    }
};

• mutations는 commit()을 이용하여 사용했다면 actions는 dispatch()를 이용하여 사용하면 된다.

actions의 context

• context를 로그 찍어보면 다음과 같이 볼 수 있는데

• context.dispatch를 이용해 작업 내부에서 다른 작업을 전달할 수 있고 HTTP 요청을 보낼 때도 도움이 된다.

  • 요청이 성공하면 성공 액션을 트리거하고 오류가 발생하면 오류 처리 액션을 트리거할 수 있다.
  • HTTP 요청의 결과에 대한 반응으로 다른 여러 작업을 전달하는 하나의 액션을 만들 수 있다.

• getters를 사용하여 게터에서 얻는 특정 값을 가져올 수도 있다. 게터에 접근하는 것만으로 충분하지 않을 때는 상태(state)를 직접적으로 사용할 수도 있다.

  • 하지만 액션 내부에서 상태를 조작해서는 안 된다. 항상 mutations을 사용해야 한다.