ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • vuex 세 번째, computed???
    Vue.js 2022. 1. 3. 14:33

    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);

Designed by Tistory.