Vuex의 Helper function

Vuex와 Helper function

Vuex는 Vue.js 애플리케이션의 상태 관리 패턴 및 라이브러리입니다. Vuex는 중앙 집중식 저장소(store)를 제공하고, 컴포넌트 간의 통신을 편리하게 하기 위해 헬퍼 함수를 제공합니다. 이러한 헬퍼 함수는 Vuex에서 정의된 액션, 뮤테이션 및 게터와 같은 개념을 Vue.js 애플리케이션의 컴포넌트에 쉽게 매핑합니다.

mapState

• mapState 헬퍼 함수는 상태(store) 객체를 컴포넌트에 매핑합니다.
• mapState 함수는 객체 또는 배열 형식으로 사용할 수 있습니다.

객체 형식으로 사용하는 경우:

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState({
      count: state => state.count,
      message: state => state.message
    })
  }
}

...은 객체를 확장합니다. 이것은 count 및 message 속성이 상태(store) 객체에 있는 경우에만 해당됩니다. 이렇게 하면 this.count 및 this.message가 컴포넌트 내에서 사용할 수 있습니다.

배열 형식으로 사용하는 경우:

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count', 'message'])
  }
}

이 경우, this.count 및 this.message가 컴포넌트 내에서 사용할 수 있습니다.

mapGetters

• mapGetters 헬퍼 함수는 게터(getter) 메소드를 컴포넌트 계산된 속성으로 매핑합니다.
• mapGetters 함수는 배열 또는 객체 형식으로 사용할 수 있습니다.

배열 형식으로 사용하는 경우:

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter'
    ])
  }
}

이 경우, doneTodosCount 및 anotherGetter 속성이 게터(getter) 객체에 있는 경우에만 해당됩니다. 이렇게 하면 this.doneTodosCount 및 this.anotherGetter가 컴포넌트 내에서 사용할 수 있습니다.

객체 형식으로 사용하는 경우:

import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters({
      doneCount: 'doneTodosCount'
    })
  }
}

이 경우, doneTodosCount 게터 메소드가 있고, doneCount가 컴포넌트의 계산된 속성으로 매핑됩니다. 이렇게 하면 this.doneCount가 컴포넌트 내에서 사용할 수 있습니다.

mapActions

• mapActions 헬퍼 함수는 액션(action) 메소드를 컴포넌트 메소드로 매핑합니다.
• mapActions 함수는 배열 또는 객체 형식으로 사용할 수 있습니다.

import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions([
      'increment',
      'someOtherAction'
    ])
  }
}

이 경우, increment 및 someOtherAction 액션 메소드가 있고, this.increment() 및 this.someOtherAction() 메소드가 컴포넌트에서 사용할 수 있습니다.

객체 형식으로 사용하는 경우:

import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions({
      add: 'increment'
    })
  }
}

이 경우, increment 액션 메소드가 있고, add 메소드가 컴포넌트에서 사용할 수 있습니다. 이렇게 하면 this.add()가 this.increment()와 동일한 역할을 합니다.

mapMutations

• mapMutations 헬퍼 함수는 뮤테이션(mutation) 메소드를 컴포넌트 메소드로 매핑합니다.
• mapMutations 함수는 배열 또는 객체 형식으로 사용할 수 있습니다.

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations([
      'increment',
      'someOtherMutation'
    ])
  }
}

배열 형식으로 사용하는 경우:

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations([
      'increment',
      'someOtherMutation'
    ])
  }
}

이 경우, increment 및 someOtherMutation 뮤테이션 메소드가 있고, this.increment() 및 this.someOtherMutation() 메소드가 컴포넌트에서 사용할 수 있습니다.

객체 형식으로 사용하는 경우:

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations({
      add: 'increment'
    })
  }
}

이 경우, increment 뮤테이션 메소드가 있고, add 메소드가 컴포넌트에서 사용할 수 있습니다. 이렇게 하면 this.add()가 this.increment()와 동일한 역할을 합니다.

createNamespacedHelpers

• createNamespacedHelpers 함수는 네임스페이스(namespace) 모듈에서 mapState, mapGetters, mapActions, mapMutations 함수를 생성합니다.

• 예를 들어, users 네임스페이스에서 mapState 및 mapActions 함수를 생성하려면 다음과 같이 사용할 수 있습니다.

import { createNamespacedHelpers } from 'vuex';

const { mapState, mapActions } = createNamespacedHelpers('users');

export default {
  computed: {
    ...mapState({
      username: state => state.username
    })
  },
  methods: {
    ...mapActions([
      'login',
      'logout'
    ])
  }
}

createNamespacedHelpers 함수를 사용하면 네임스페이스에서만 작동하는 mapState, mapGetters, mapActions, mapMutations 함수를 간편하게 생성할 수 있습니다.

위 예제에서 mapState 함수는 state.users.username을 컴포넌트의 this.username과 매핑하고, mapActions 함수는 users/login 및 users/logout 액션 메소드를 각각 this.login() 및 this.logout() 메소드로 매핑합니다.

이러한 Vuex 헬퍼 함수들은 코드의 반복을 줄여주고, 코드의 가독성을 높여줍니다. Vuex 헬퍼 함수를 사용하면 컴포넌트 코드가 더 짧아지고, Vuex 코드를 더 간단하게 작성할 수 있습니다.