오랜만에 해보는 Vuex 도입

Vue를 사용하는데 데이터 관리가 너무 어려웠다.

프로젝트가 엄청 큰 것이 아니라서 도입하진 않았었는데, 이제 슬 도입해서 데이터 관리하는 게 나중에 가서도 편할 것 같다는 생각이 들어서 기록해보려고 한다.

 

아래 명령어로 Vuex 설치

npm install vuex@next

 

이지하게 설치 완료.

 

이제 Vuex로 데이터를 관리하기 위해 store.js를 생성해 준다.

 

이제 Vuex의 개념을 다시 살펴봐야 한다.

• Vue의 상태를 관리하는 패턴이자 라이브러리.
• 모든 컴포넌트들의 중앙 저장소 역할을 담당

하나의 저장소에 데이터를 관리하고, 컴포넌트에서 사용하니 유연하고 편리하게 데이터 공유가 가능하다.

 

이 개념을 이해해야 한다.

State

• data를 관리한다.(데이터 저장소)
• State에서 컴포넌트에 올리는 과정을 랜더링 한다고 말한다.

Action

• 컴포넌트에서 데이터를 변경하고 싶으면 메서드를 실행해야 하는데, 해당 메서드를 관리하는 것이 Action
• Action을 호출하는 작업을 Dispatch라고 한다.
• 여기서 스프링 부트와 REST API 통신을 진행한다.(비동기)
• Action에서 절대 직접 State의 데이터를 변경시키면 안 된다. (이건 Mutations가 하도록 분리)

Mutations

• 비동기적으로 받은 data에 추가 작업을 진행해야 하는 경우 사용함.
• Mutations를 commit으로 호출해서 처리한 뒤 State로 데이터를 저장하는 방식.
• 비동기 작업이 가능하지만 웬만하면 하지 마라.(언제 응답이 올 지 몰라서)

 

 

일단 store.js를 생성

// Vuex 4.x를 사용하여 Vue 3와 호환되도록 설정
import { createStore } from "vuex";

export default createStore({
  state: {
    isLoggedIn: false,
  },
  mutations: {
    setLoginState(state, { isLoggedIn }) {
      state.isLoggedIn = isLoggedIn;
    },
  },
  actions: {
    login({ commit }, { isLoggedIn }) {
      commit("setLoginState", { isLoggedIn });
      localStorage.setItem("isLoggedIn", isLoggedIn);
    },
    logout({ commit }) {
      commit("setLoginState", { isLoggedIn: false });
      localStorage.removeItem("isLoggedIn");
    },
  },
});

state : 저장소에는 isLoggedIn이라는 이름을 둬서 로그인 상태를 관리.

mutations : state에 있는 데이터를 변경하기 위한 메서드.(state의 변경은 mutations로만 가능하다)

actions : 여러 mutations를 실행하거나, 비동기 작업을 수행한다. actions을 통해 외부에서 dispatch로 부를 메서드를 정의하고, mutations를 호출해서 데이터 변경.

 

위의 login 코드를 보면

1. 외부에서 dispatch로 login(actions) 호출.
2. 인자로 받은 isLoggedIn을 부르기 위해 commit을 사용해서 setLoginState(mutations) 호출
3. 데이터 변경 진행
4. 로컬스토리지에 isLoggedIn 상태 변경

위와 같은 순서대로 흘러간다.

.then((response) => {
        // 스토어의 로그인 액션 호출
        this.$store.dispatch("login", { isLoggedIn: true });
        this.$router.push("/chat");
      })

외부에서는 dispatch를 통해 해당하는 actions를 호출해 주고, 값이 있다면 같이 넘겨준다.

 

이러한 방식을 통해 데이터를 관리할 수 있다.

아 뷰 어렵다 프론트 어렵다