𝐓𝐨𝐝𝐚𝐲 𝐈 𝐋𝐞𝐚𝐫𝐧 2022.05.11.수

Today I Learn 220511

오늘은 Vuex에 대해 학습하였다.

Vuex를 사용하는 이유는 다양한 컴포넌트들이 있을 때 기존의 Vue환경은 각각의 컴포넌트마다 data를 들고 있지만, 그렇게 되면 emit과 props를 계속 거쳐 통신해야 하고 나와 같은 동기 component와 대화할 때도 여러명을 거쳐 통신해야 한다.

 

 

이러한 불편함을 해소하기 위해 Vuex를 사용한다! Vuex에서는 index.js라는 곳에서 (마치 공용통장) data를 관리한다. 그래서 빠르고 효율적인 통신이 가능하다. 하지만 공용으로 사용하다보니 편리성은 증가 된 반면 상태관리를 잘 해야하는 단점이 생겼다!

 

 

어쨋든, Vuex의 core 개념은 다음과 같다.

- State

​ 중앙에서 관리하는 모든 상태 정보 (data)

-Getters

​ state를 변경하지 않고 활용하여 계산을 수행 (computed 속성과 유사)

- Mutations

​ 실제로 state를 변경하는 유일한 방법

-Actions

​ Mutations와 유사하지만 다음과 같은 차이점이 있음

1. state를 변경하는 대신 mutations를 commit() 메서드로 호출해서 실행 
1.  mutations와 달리 비동기 작업이 포함될 수 있음 (Backend API와 통신하여 Data Fetching 등의 작업 수행)

 

 

이 개념들을 이용해 Vuex를 이용한 ToDo App을 구현하는 실습을 했다.

2022.05.11 - [IT ②/Vue.js] - Vue.js - Vuex를 활용한 Todo App 구현하기

Vue.js - Vuex를 활용한 Todo App 구현하기