[Vue.js] Vuex4: mapState 사용하기

💡 실습 포인트!

💜 computed 알아보기

methods : {
  now(){
    return new Date()
  }
},
computed : {
  now2(){
    return new Date()
  }
},

• 함수를 만들 때 보통은 methods: { } 안에 만들지만 computed: { } 안에 만드는 것도 가능하다.
• 똑같이 날짜를 알려주는 기능의 함수를 위와 같이 methods 항목과 computed 항목에 각각 만들어서 사용했을 때 차이점은 다음과 같다.
  • methods 안에 만든 함수는 함수를 부를 때마다 해당 함수 안의 코드가 실행된다.
  • computed 안에 만든 함수는 함수를 불러도 해당 함수 안의 코드가 실행되지 않는다.
    computed: { } 안에 작성한 함수는 그냥 Component 를 로드할 때 딱 한번만 실행되고, 그 값을 계속 저장해서 사용한다. 즉, 일종의 계산결과 저장공간이다.
• 그리고 computed 내의 함수는 return 을 꼭 써야하며, 함수를 가져다 사용할 때에는 소괄호 없이 함수명만 작성하면 된다.

---

💜 computed 로 state 코드 축약하기

computed : {
  name(){
    return this.$store.state.name
  }
}

• vuex 를 사용하면 데이터를 가져올 때마다 $store.state.name~~ 과 같이 코드를 작성하기에는 코드가 너무 길고 복잡하다. 
• 따라서, 자주 사용하는 state 는 computed 항목 안에 추가해주면 조금이라도 짧게 사용하는 것이 가능하다.
  (methods 항목 안에 넣어도 되지만 computed 가 더 적절해보이므로 computed 에 넣자!)
• 참고로 <script></script> 안에서 $store 를 사용하려면 this.$store 과 같이 앞에 this 를 붙여주어야 한다. 
• 이제 위와 같이 코드를 작성해주면, {{ }} 안에 name 만 써도 name 이라는 state 를 가져다 사용할 수 있게 된다.

---

💜 mapState 로 computed 안의 코드 축약하기

import {mapState} from 'vuex'

computed : {
  ...mapState(['state_이름1', 'state_이름2'])
}

• 하지만 위와 같이 computed 를 활용한다해도 state 가 몇십개, 몇백개가 있으면 하나하나 state 축약 코드를 만들기가 힘들다.
• 이 때, mapState 를 사용하면 보다 편하게 computed 에다가 state 를 등록하는 것이 가능해진다.
• 당연히 mapState 를 사용하기 위해서는 mapState 를 import 해와야 한다.

 

import {mapState} from 'vuex'

computed : {
  ...mapState({ state_가져올_때_사용할_이름1 : 'state_이름1'})
}

• mapState 에 object 자료형을 넣으면 state 를 가져올 때 사용할 이름을 따로 지정해줄 수도 있다.

 

import {mapState, mapMutations} from 'vuex'

computed : {
  ...mapState(['state_이름1', 'state_이름2']),
  ...mapMutations([ 'mutations_함수_이름1', 'mutations_함수_이름2' ])
}

• 위와 같이 코드를 작성하면 mutations 내의 함수도 가져다 사용하는 것이 가능하다.
• 예를 들어, mutations 내에 changeLikes 라는 함수가 있을 때, 함수를 사용할 때마다 $store.commit('changeLikes') 라고 작성하던 것을 changeLikes() 이렇게만 코드를 작성해도 사용이 가능한 것이다.
• 이외에도 mapActions 같은 것도 있다고 하니, 필요하면 구글링해서 사용방법을 익혀 직접 사용해보자.