state를 vue파일에서 사용할 때 $store.state.name의 방식으로 사용했는데 이게 길고 사용이 불편할 때 mapState함수를 사용하자
함수를 만들 때 methods: {}안에 만들어 사용하지만 computed: {}안에도 만들 수 있다.
똑같은 기능의 함수를 만들었을 때 이 차이점은
methods안에 만든 함수는 함수를 부를 때마다 그 안의 코드가 실행되고,
computed안의 함수는 함수를 불러도 안의 코드가 실행되지 않는다.
이 computed는 그냥 컴포넌트로드할때 한번 실행되고 그 값을 계속 저장해 사용한다.
일종의 계산결과를 저장하는 공간이라고 생각하면 편하다.
$store.state.name으로 계속 많은 코드를 작성 시 코드가 길어지며 복잡해진다.
이 경우 자주 사용하는 state를 computed에 적어두고 짧게 사용이 가능하다.
computed: {
name(){
return this.$store.state.name
}
}
(script안에서 store사용시 this.$store로 사용)
그러면 이제 위에가서 {{name}}으로 사용해 쉽게 쓸 수 있다.
그러나 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('좋아요')가 아닌 좋아요()로 사용할 수 있다.