Vuex는 말로만 들어봤지 직접 적용을 해본 적이 없었는데 이번에 기회가 생겨 적용해볼 수 있었다.

Vuex란?

Vue.js 애플리케이션을 위한 상태 관리 패턴 + 라이브러리다. 그렇다면 상태란 무엇인가? 필자의 생각에는 변경 가능한 모든 데이터를 상태라고 생각한다. 우리는 그것을 관리함으로써 상태가 어떻게 변경될지 예측할 수 있다. 특히 프로젝트가 커지면 커질 수록 상태를 변경하는 곳이 여려군데가 있으면 오류가 났을때 잡기 어렵다. 이 때 Vuex같은 상태관리 툴을 쓰면 상태의 변경을 한 곳에서 관리하여 상태에 대한 모든 것을 예측할 수 있다.

직접 적용해보니 Vuex의 장점이 확 와닿았다. 상태를 내가 지정한 곳에서 관리하니 데이터의 흐름을 빠르게 파악할 수 있어서 좋았다.

Vuex의 네가지 단계

Vuex에는 State, Getters, Mutations, Actions 네가지 개념이 있다. 이 단계들은 각각 사용법이 정해져 있는데, 이 제한이 상태 관련 기능을 만들 때 독립적으로 만들 수 있게해서 좋았다. 또한 직접적으로 데이터를 변조하지 않아서 상태의 흐름을 잘 파악할 수 있는 장점도 느낄 수 있었다.

State

내가 관리하고 싶은 데이터를 저장하는 곳이다. 직접 변경할 수 없다. 다른 곳에서 사용하려면 computed를 사용하면 된다

const data = computed(() => state.data)

state: {
  data: [],
}

Getters

상태에 관한 간단한 계산을 담당한다.

Mutations

유일하게 state를 변경할 수 있는 함수들을 모아놓은 곳이다. commit '함수 이름' 이렇게 사용할 수 있다. 무조건 동기로 작동한다.

Actions

mutations를 호출해서 변수를 조작할 수 있다. 또한 비동기 호출을 해야하는 기능들을 담당한다.

useStore 을 vuex에서 import 해서 데려온다. 그리고 computed(() => 사용할 저장소... )

내가 store에서 가져오는 데이터가 랜더링보다 늦을 때? 그런데 나는 그 데이터를 template 안에서 써야한다~! 상황 : 부모 컴포넌트의 데이터 객체에서 id를 뽑아서 id당 한 번씩 api를 호출해야 그 id에 대한 정보를 받아볼 수 있다. 그리고 나는 정보를 모아 다시 자식 컴포넌트에 보내줘야 한다. 반복문으로 id를 뽑아서 api를 호출을 성공했다. actions 안에서 [id]를 돌려서 [값]을 얻었다. 넘기는 것 까지는 성공했으나 화면이 랜더링 되고 나서야 데이터가 넘어왔다. 따라서 화면이 오류가 났다.

내가 해결한 방법은 template 에서 v-if 를 사용해서 storeData 가지고 예외처리를 하면 여과없이 에러가 났다. 조건을 걸어줄 때 storeData && storeData.사용할 데이터 이렇게 조건을 주었더니 됐음! 혹은 storeData?.사용할 데이터

obj?.property 이 문법을 Optional chaining 이라고 하는데 이 문법 사용시 주의 할 점이 있다. 남발하면 어디서 오류가 났는지 디버깅 하기가 어려워지니 객체를 못불러온다? 에잇 옵셔널 체이닝! 하고 남발하지 말자~

reference