[Vue] 스토어 등록한 데이터 vuex helper로 사용하는 방법

1. state

state는 computed 옵션 안에서 사용한다

store에 등록한 state 사용하는법

<script>
  computed: {
    state이름() {
      return this.$store.state.모듈이름.state이름
    }
  }
</script>

store에 등록한 state를 vuex helper로 사용하는법

<script>
  import { mapState } from 'vuex'

  computed: {
    ...mapState('모듈이름', ['state이름'])
  }
</script>

 

2. getters

getters는 computed 옵션 안에서 사용한다

store에 등록한 getters 사용하는법

<script>
  computed: {
    getters이름() {
      return this.$store.getters['모듈이름/getters이름']
    }
  }
</script>

store에 등록한 getters를 vuex helper로 사용하는법

<script>
  import { mapGetters } from 'vuex'

  computed: {
    ...mapGetters('모듈이름', ['getters이름'])
  }
</script>

 

3. mutations

mutations는 methods 옵션 안에서 사용한다

store에 등록한 mutations 사용하는법

<script>
  methods: {
    mutations이름() {
      this.$store.commit('모듈이름/mutations이름')
    }
  }
</script>

store에 등록한 mutations를 vuex helper로 사용하는법

<script>
  import { mapMutations } from 'vuex'

  methods: {
    ...mapMutations('모듈이름', ['mutations이름'])
  }
</script>

 

4. actions

actions는 methods 옵션 안에서 사용한다

store에 등록한 mutations 사용하는법

<script>
  methods: {
    actions이름() {
      this.$store.dispatch('모듈이름/actions이름')
    }
  }
</script>

store에 등록한 mutations를 vuex helper로 사용하는법

<script>
  import { mapActions } from 'vuex'

  methods: {
    ...mapActions('모듈이름', ['actions이름'])
  }
</script>