[Vue.js] Vuex 를 적용해보기

0. Vuex 설치.

 

npm install --save vuex 명령어를 터미널에 입력

 

이후 설치가 완료되면 프로젝트의 package.json을 열어본다.

아래처럼 종속성이 추가되어있으면 성공이다.

  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-axios": "^3.2.4",
    "vuex": "^3.6.2"
  },

 

 

1.  Vuex는 왜 필요한가?

-> 복잡한 App에서 컴포넌트의 갯수가 많아지면 컴포넌트 간에 데이터 전달이 어려워짐.

-> 중앙 집중화된 상태 정보 관리가 필요하고, 상태 정보가 변경되는 상황과 시간을 추적해야 함

-> 컴포넌트에서 상태 정보에 안전하게 접근가능

 

 

2. Vuex 개념

 

State : 컴포넌트간 공유하는 데이터(data())

View : 데이터를 표시하는 화면 (template)

Action : 사용자의 입력에 따라 데이터를 변경하는 메서드(method)

 

 

 

3. State 

아래와 같이 Vuex에서는 state로 선언 후  this.$store와 같이 사용한다.

//Vue
data: {
message: "Hello Vue.js!"
}
//Vuex
state: {
message: "Hello Vue.js!"
}

// 사용
<p>{{ this.$store.state.message }}</p>

 

4. getters

state값에 접근하는 속성, 

//store.js
state: {
	num: 10
},
getters: {
  getNumber(state) {
  	return state.num;
},
doubleNumber(state) {
  	return state.num * 2;
  }
}
// 사용
<p>{{ this.$store.getters.getNumber }}</p>

 

5. Mutation

state의 값을 변경하는 속성. 메서드이다.

state: { num: 10 },
mutations: {
  sumNumbers(state, anotherNum) {
  	state.num += anotherNum;
  }
}

 

6. state를 직접 변경하지 않고, mutation을 사용하여 변경하는 이유는?

어떤 시점에서 state가 변화했는지 알기 위함이다.

 

7. Vuex Helper

우선 Helper를 사용하려면 아래와 같이 import가 필요하다.

import { mapState } from 'vuex'
import { mapGetters } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'

사용 시에는 {...mapState['??']} 같은 형태로 사용해야 한다.

 

 

 

- mapState

Vuex에 선언한 state속성을 뷰 컴포넌트에 더 쉽게 연결해주는 역할을 한다.

//App.vue
import { mapState } from 'vuex'
export default {
  computed: { ...mapState(['num']) }
  	//num() { return this.$store.state.num }
  }
  
//store.js
state: {
  num: 10
}

 

-mapGetter

Vuex에 선언한 Getter속성을 뷰 컴포넌트에 더 쉽게 연결해주는 역할을 한다.

//App.vue
import { mapGetters } from 'vuex'
export default {
	computed : { ...mapGetters(['reverseMessage']) }
}
//store.js
getters: {
  reverseMessage(state) {
    return state.msg.split('').reverse().join('');
  }
}

이외에도 mapMutation, mapAction이 있다. 이것들은 이 다음에 포스팅 할 실제 코드에서 사용 방법 확인