computed

• 일종의 함수보다는 데이터 계산결과 저장공간으로 봐도 된다.
• state 하나 꺼내쓸 때도 computed 안에 사용하는게 일반적인 방법이다.
• computed 함수는 꼭 return이 있어야 한다.
• computed 함수를 가져다가 쓸 때는 소괄호없이 함수명만 쓰면 된다.

<p>현재 날짜 : {{now}}</p>

computed : {
	now(){
		return new Datae()
    }
}

methods 와 computed 비교

• methods 안에 만든 함수는 함수를 부를 때마다 안의 코드가 실행된다.
• computed 안에 만든 함수는 함수를 불러도 안의 코드가 실행이 안된다.
  즉, 컴포넌트로드시 한번 실행되고 그 값을 계속 저장해서 쓴다.
  일종의 계산결과 저장공간이라고 보면 된다.

computed 쓰면 state 꺼내는 코드가 짧아진다.

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

스크립트 태그 안에서 $store쓰려면 this.$store이다.

❗️단점) 꺼낼 state가 100가 있으면 computed도 복잡해진다. 그렇기 때문에 mapState를 이용하면 된다.

mapState

• mapState를 사용하면 computed 코드가 짧아진다.
• vuex state 한번에 꺼내쓰려면 ...mapState를 사용하면 된다.

import {mapState} from 'vuex'

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

작명가능

import {mapState} from 'vuex'

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

mapMutations

import {mapState, mapMutations} from 'vuex'

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

$store.commit('좋아요')가 아니라 위에 mapMutations에 정의해 놓으면 좋아요()로 사용가능하다.

mapActions

//App.vue
import { mapActions } from 'vuex'

computed : {
	...mapActions(['delayClickBtn'])
}

//store.js
actions:{
	delayClickBtn(context){
    	setTimeout(() => context.commit('clickBtn'),2000);
    }
}