vuex 세 번째, computed???

computed는 프로젝트할 때도 많이 썼는데,

 

그냥 계산기이다.

 

그리고 값을 꼭 return하기때문에, 함수 형식 몸통 안에 return이 있어야한다.

 

그리고 html에 넣을 때 메소드처럼 ( )를 하지않는다.

 

그냥 변수처럼 이름만 써주면된다.

 

 

그리고 기본적으로 페이지가 로드될 때 계산값이 정해저 return 결과가 생성되고,

 

만약 로직 내부에 script의 data 변수같은게 들어있다면, 

 

다시 로직이 실행돼 계산돼 새로운 return값을 반환한다.

 

 

그리고 computed는 state에 있는 변수들을 컴포넌트에서 쓸 수 있게 해준다.

 

보통 state에 있는 name 변수를 쓰고자한다면, 

 

computed: {

    name() {

        return this.$store.state.name;

    }

}

 

이렇게 정의해줄 수 있다.

 

 

근데 한꺼번에 state 변수를 모두 가져오려면,

 

computed: {

   ...mapState(['name', 'age', 'gender']);

}

 

이렇게 spread operator로 모두 가져올 수 있다.

 

물론 script의 맨 위에 import { mapState } from 'vuex';

 

이런 import가 필요하다.

 

 

새로 알게된 사실은

 

computed: {

   ...mapState({ name1: 'name', age1: 'age', gender1: 'gender' });

}

 

이렇게 객체 형식으로 받아와서 새로운 이름으로 쓸 수도 있다는거...

 

예시는 state의 name을 받아 name1이라는 이름으로 컴포넌트에서 쓸 수 있다는것이다.

 

 

그리고 내가 프로젝트 할 때는,

 

mutations는 그냥 actions로 서버에서 받아온 정보들을 state로 보낼 때 단순히 거치는 통로로밖에 사용하지않았다.

 

하지만 mutations에도 나름 로직을 구현해도 된다는 점을 알았고...

 

 

mutations에 있는 메소드들을 컴포넌트에서 쓰고싶으면 전 포스트에 썼듯이

 

this.$store.commit('showMore', 1);

 

이렇게 해주면 된다했다.

 

 

만약 모든 mutations 메소드들을 컴포넌트에 전부 가져와 좀 편하게 쓰고싶다면,

 

methods: {

    ...mapMutations(['showMore', 'cancelList']);

}

 

이렇게 methods에다가 정의해두면된다. 물론 import는 해야하고,

 

actions도 마찬가지.

 

 

사용할 때는 this.showMore(params);