vuex 공부

Vuex 공부 


$store.commit()  : mutations 실행 요청 

$store.dispatch() : actions 실행 요청

ajax로 받은 데이터 바로 저장이 아니라 mutations를 통해 저장해야 한다. 

computed vs methods 차이점 

-computed 함수는 처음 실행시만 작동 하고 값을 간직함, 자원 절약 가능. 계산결과저장용 함수 

-methods 함수는 사용할 때마다 실행 됨 

* 팁 
computed를 통해 mapState를 사용하면 긴 변수명을 축약 할 수 있다. 

1. mapState를 import 한다 

import {mapState} from 'vuex'

2. computed에 state(데이터)를 등록한다

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

3. 다른 변수 명으로 쓰고 싶을 시 

computed : {
  ...mapState({ 쓰고싶은이름 : 'state이름1'})
}

*팁2
mutation 함수도 쉽게 가져 올 수 있다.

import {mapState, mapMutations} from 'vuex'

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