Vuex.Store

Vuex.Store 생성자 옵션

state

const store = new Vuex.Store({
  state: {
    count: 0
  },
});

Vuex 저장소의 루트 상태 객체

프로젝트 전체에서 공통으로 사용할 변수를 정의하는 곳

모듈 재사용을 위해 State 객체를 재사용하고자 할 때 유용

mutations

export const store = new Vuex.Store({
  state: {
    news: [],
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
});

Vuex는 state에 정의된 변수를 직접 변경하는 것을 허용하지 않습니다.

반드시 mutations을 이용해서 변경을 해야 합니다.

mutations는 비동기 처리가 아닌 동기 처리를 통해 state에 정의된 변수의 변경사항을 추적할 수 있게 해 줍니다.

actions

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

actions는 mutation과 유사한 역할을 합니다. action을 통해 mutations에 정의된 함수를 실행시킬 수 있습니다.

actions에 정의된 함수 안에서는 여러 개의 mutations를 실행시킬 수 있을 뿐만 아니라, mutations와 달리 비동기 작업이 가능합니다.

액션 핸들러는 저장소 인스턴스의 같은 메소드들/프로퍼티 세트를 드러내는 컨텍스트 객체를 받습니다.

{getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}
commit: ƒ boundCommit(type, payload, options)
dispatch: ƒ boundDispatch(type, payload)
getters: {}
rootGetters: {}
rootState: {__ob__: Observer}
state: {__ob__: Observer}
__proto__: Object

그래서 context.commit을 호출하여 데이터를 변경하거나 context.state와 context.getters를 통해 상태와 getters에 접근할 수 있습니다.

dispatch

액션은 store.dispatch로 시작합니다.

store.dispatch('increment')

카운트를 증가시키려면 state.commit을 직접 호출하여 증가시킬 수 있지만 그렇게 한다면 동기적으로 작동하게 됩니다.

하지만 액션 내에서는 비동기로 작업을 수행할 수 있습니다.

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

액션은 동일한 페이로드 타입과 객체 스타일의 디스패치를 지원합니다.

// 페이로드와 함께 디스패치
store.dispatch('incrementAsync', {
  amount: 10
})

// 객체와 함께 디스패치
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

액션은 비동기 api호출과 여러 개의 변이를 커밋할 수 있습니다.

actions: {
  checkout ({ commit, state }, products) {
    // 장바구니에 현재있는 항목을 저장하십시오.
    const savedCartItems = [...state.cart.added]

    // 결제 요청을 보낸 후 장바구니를 비웁니다.
    commit(types.CHECKOUT_REQUEST)

    // 상점 API는 성공 콜백 및 실패 콜백을 받습니다.
    shop.buyProducts(
      products,
      // 요청 성공 핸들러
      () => commit(types.CHECKOUT_SUCCESS),
      // 요청 실패 핸들러
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

 

컴포넌트 내부에서 디스패치 액션을 사용할 수 있습니다.

this.$store.dispatch('xxx')를 사용하여 컴포넌트에서 액션을 디스패치하거나 컴포넌트 메소드를 store.dispatch 호출에 매핑하는 mapActions 헬퍼를 사용할 수 있습니다 (루트 store 주입 필요) :

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment' // this.increment()을 this.$store.dispatch('increment')에 매핑

      // mapActions는 페이로드를 지원합니다.
      'incrementBy' // this.incrementBy(amount)를 this.$store.dispatch('incrementBy', amount)에 매핑
    ]),
    ...mapActions({
      add: 'increment' // this.add()을 this.$store.dispatch('increment')에 매핑
    })
  }
}