[Vue/코딩애플/part3] 9. methods와 comptued 차이점 / vuex - mapState, mapMutatiuons

📌 methods VS computed

vue 에서 함수 다루는 방법 두 가지

1. methods : { }

2. computed : { }

 

methods 함수는 사용할 때마다 실행된다.

 

computed 함수는 사용해도 실행되지 않는다.

vue 파일이 로드 됐을 때 한 번 읽힌다. 그리고 그 값을 간직한다. (처음 실행하고 값을 간직함)

리턴 값의 내용이 변경되면 재실행되긴 함

계산결과저장용 함수들 이라고 생각하면 된다.

 

computed 함수 호출할 때는 괄호 사용 X / 함수 이름만 쓴다

computed 에 now 라는 함수가 있다하면

now (O)

now() (X)

 

 

method를 이용해 현재시간을 나타내는 now()

computed를 이용해 현재시간을 나타내는 now2() 함수를 정의했다.

버튼을 누르면 카운터가 1씩 증가한다.

 <p> methods : {{ now() }}</p>
 <p> computed : {{ now2}}</p>
 {{ counter }}
 <button @click="counter++">버튼</button>

 

methods: {
    // 현재 시간 출력 (compted 와 비교)
    now () {
      return new Date()
    }
  }
  
computed : {
    now2() {
      return new Date()
    }
}

 

 

버튼을 5번 눌렀을 때, 버튼을 누를 때마다 mothods 의 now 함수는 계속 실행되어 시간이 실시간으로 업데이트 되었다.

반면에 computed 의 시간은 처음 로드될 때의 시간 그대로이다.

 

🔎 computed 는 데이터 계산 결과 저장 공간이라고 생각하자

computed 를 통해 자원을 절약할 수 있다.

 

⚡ computed 에는 꼭 return 값이 있어야 한다. (없으면 에러남) 항상 무언가를 퉤 뱉는다.

 

---

📌 mapState 

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

일반적으로 state 하나 꺼내 쓸 때 computed 안에서 사용한다.

 

 

computed 안에 꺼내쓸 state 를 작성하면 편하게 state 를 갖다 쓸 수 있다.

 

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

 

이제 {{ name }} 으로 store.js 에 있는 name 에 접근할 수 있다.

 

<h4> {{ name }}</h4>

 

 

 

 

갖다 쓸 state 너무 많으면 computed 안에 작성할 내용이 너무 많아진다.

그럴 때 쓰는 것이 ...mapState([])

 

 

mapState 는 vuex 함수이므로 import 해야 한다.

import {mapState} from "vuex";

 

...mapState(['state이름1', 'state이름2'])

 

 

 

🥽 mapState Object 형식으로 작명하기

mapState 는 Object 형식으로 작명도 가능하다.

...mapState({ 작명 : 'name'})

 

name 을 작명으로 작명하고 {{ 작명 }} 을 출력해보면 기존 name 이 잘 출력된다.

 

 

🥽 vuex mutations 한 번에 꺼내쓰기 (mapMutatiuons) 

import {mapMutations, mapState} from "vuex";

 

methods 안에 다음을 작성한다. (마찬가지로 mapMutations 쓰려면 import 해야 함)

...mapMutations(['함수명'])

 

이제 Array 안에 정의된 함수명 그대로 갖다 쓸 수 있다.

<button @click="changeNm"> store 데이터 변경하기</button>

 

() 는 써도 되고 안 써도 됨

 

 

mapMutations 를 쓰기 전에는

<button @click="$store.commit('changeNm')"> store 데이터 변경하기</button>

 

이렇게 commit 을 이용했었는데 엄청 간편해졌다!

 

 

🔎 actions 도 마찬 가지 방법으로 활용할 수 있으니 궁금하면 찾아보자. (mapActions)