Vue.js Vuex: mapState

state를 vue파일에서 사용할 때 $store.state.name의 방식으로 사용했는데 이게 길고 사용이 불편할 때 mapState함수를 사용하자

computed

함수를 만들 때 methods: {}안에 만들어 사용하지만 computed: {}안에도 만들 수 있다.

똑같은 기능의 함수를 만들었을 때 이 차이점은
methods안에 만든 함수는 함수를 부를 때마다 그 안의 코드가 실행되고,
computed안의 함수는 함수를 불러도 안의 코드가 실행되지 않는다.
이 computed는 그냥 컴포넌트로드할때 한번 실행되고 그 값을 계속 저장해 사용한다.
일종의 계산결과를 저장하는 공간이라고 생각하면 편하다.

• computed함수는 return이 필수
• computed함수를 사용할 때는 소괄호 없이 함수명만 사용.

computed를 사용한 state

$store.state.name으로 계속 많은 코드를 작성 시 코드가 길어지며 복잡해진다.

이 경우 자주 사용하는 state를 computed에 적어두고 짧게 사용이 가능하다.

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

(script안에서 store사용시 this.$store로 사용)
그러면 이제 위에가서 {{name}}으로 사용해 쉽게 쓸 수 있다.

mapState

그러나 state가 수많으면 computed도 상당히 많이 만들어야 하는 경우가 있는데
이때는 mapState를 사용하면 편리하다.
그러면 알아서 computed에 state를 등록한다.

import {mapState} from 'vuex'

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

처럼 사용하면된다.

import {mapState} from 'vuex'

computed : {
  ...mapState({ 작명 : 'state이름1'})
}

혹은 object자료형을 넣어 state사용시 이름 변경도 가능하다.

import {mapState, mapMutations} from 'vuex'

computed : {
  ...mapState(['state이름1', 'state이름2']),
  ...mapMutations([ '좋아요', 'setMore' ])
}

이러면 mutations함수도 쉽게 사용이 가능하며
$store.commit('좋아요')가 아닌 좋아요()로 사용할 수 있다.