Vuex helpers - parent,child와 mapGetters,mapMutations

지난 시간 state, getters, mutations 를 사용한 전체 코드

 

// Parents.vue

<template>
<div id="app">
  Parent counter : {{ Parentscounter }} <br>
  <button @click="addCounter">+</button>
  <button @click="subCounter">-</button>
  <child></child>
</div>
</template>


<script>
import Child from "./Child.vue";

export default {
  components: {
    child: Child
  },
  computed: {
    Parentscounter(){
      return this.$store.getters.getCounter;
    }
  },

  methods: {
    addCounter() {
      this.$store.commit('addCounter');
    },
    subCounter() {
      this.$store.commit('subCounter');
      //this.$store.mutations.addCounter 이 아니라
      //commit 을 이용하여 mutations 이벤트를 호출해야 
    }
  }
};
</script>

 

// Child.vue
<template>
  <div>
    <hr>
    Child counter : {{ Childcounter }} <br>
    <button>+</button>
    <button>-</button>
  </div>
</template>



<script>
export default {
    computed: {
    Childcounter(){
      return this.$store.getters.getCounter;
    }
  },
  
};
</script>

 

//store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    counter: 0
  },
  getters:{
    getCounter: function(state){
      return state.counter;
    }
  },
  mutations: {
    addCounter: function (state){
      return state.counter++
    },
    subCounter: function (state) {
      return state.counter--
    }
  },
  actions: {
  },
  modules: {
  }
})

 

// Home.vue

<template>
  <div id="app">
    <Parents></Parents>

  </div>
</template>

<script>
// @ is an alias to /src
import Parents from '../components/Parents.vue'


export default {
  name: 'Home',
  components: {
    Parents,

  }
}
</script>

 

 

 

---

이번 게시글에서는 helpers를 써서 더 쉽게 쓸거다

 

getters => mapGetters

mutations => mapMutations

 

 

 

 

먼저 mapGetters,mapMutations 를 써줄 거니까 Parents.vue,Child.vue에 import 해주자

import {mapGetters} from 'vuex'
import {mapMutations} from 'vuex'

 

 

 

각각 computed, methods도 추가해주자

// Parents.vue


  computed: {
    ...mapGetters({
      Parentscounter: 'getCounter'
    }
    )
    },

  methods: {
    ...mapMutations([
      "addCounter"
    ]),
    ...mapMutations([
      "subCounter"
    ])
  }

// Child.vue

export default {
    computed: {
   ...mapGetters({
     Childcounter: 'getCounter'
   })
  },

 

**

왜 mapGetters랑 mapActions를 같은 computed나 methods에 써주지 않았을까

=> component에서 헬퍼를 이용해서 state, getters, mutations, actions를 가져올 때 위치를 꼭 지켜야 하기 때문이다

=> mapState와 mapGetters는 computed 안에 들어가야 되고,

=> mapMutations와 mapActions는 methods안에 있어야 한다

 

 

 

 

 

 

 

 

 

 

 

마찬가지로 같은 결과가 나온다

 

 

 

 

 

 

helpers를 이용한 전체코드

// Parents.vue

<template>
<div id="app">
  Parent counter : {{ Parentscounter }} <br>
  <button @click="addCounter">+</button>
  <button @click="subCounter">-</button>
  <child></child>
</div>
</template>


<script>
import Child from "./Child.vue";
import {mapGetters} from 'vuex'
import {mapMutations} from 'vuex'

export default {
  components: {
    child: Child
  },
  computed: {
    ...mapGetters({
      Parentscounter: 'getCounter'
    }
    )
    },

  methods: {
    ...mapMutations([
      "addCounter"
    ]),
    ...mapMutations([
      "subCounter"
    ])
  }
};
</script>

 

// Child.vue
<template>
  <div>
    <hr>
    Child counter : {{ Childcounter }} <br>
    <button>+</button>
    <button>-</button>
  </div>
</template>



<script>
import {mapGetters} from 'vuex'

export default {
    computed: {
   ...mapGetters({
     Childcounter: 'getCounter'
   })
  },
  
};
</script>

 

//store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    counter: 0
  },
  getters:{
    getCounter: function(state){
      return state.counter;
    }
  },
  mutations: {
    addCounter: function (state){
      return state.counter++
    },
    subCounter: function (state) {
      return state.counter--
    }
  },
  actions: {
  },
  modules: {
  }
})