Vuex (4) mapGetters, mapActions

서영·2021년 10월 7일
0
post-thumbnail

state나 getters에 drill drill..파고들어서 길게 작성하는 것을 더 깔끔하고 효율적으로 접근할 수 있게끔 해주는 vuex의 메소드

  1. mapGetters

    import {mapGetters} from 'vuex'; 를 통해 사용 가능

    computed:{
    // counter(){
    //     return this.$store.getters.finalCounter;
    // },
    ...mapGetters(['finalCounter'])//finalCounter getter를 가리킴
    },
  • 원래 this.$store.getters.getterName 을 반환해야 하는데
  • 3개의 dot과 함께 mapGetters(['getterName']) 형태로 작성할 수 있음
  • mapGetters({someProp:'getterName'}) 이렇게 써도 됨
    1. mapActions

      ChangeCounter.vue

        <template>
          <button @click="increment">Add 2</button>
          <button @click="increase({value:11})">Add 11</button>
        </template>
        
        <script>
        import {mapActions} from 'vuex';
        export default {
          methods: {
            // addOne() {
            //    this.$store.dispatch('increment');
            // },
            ...mapActions(['increment','increase'])
          },
        };
        </script>
        
        <style>
        </style>
  • [ ] 안에 multiple actions를 넣을 수 있다.
  • argument가 있는 action인 경우 해당 인자의 value값에 맞는 값도 넘겨준다. 여기서는 increase mutation이 payload를 가지기 때문에 인자로 value를 넣어줌
        ...mapActions({
                inc:'increment',
                increase:'increase',
            })
    위와 같은 형태로 작성해도 무방함
profile
꾸준히 공부하기

0개의 댓글