Vuex에서 각 사용자가 독립된 저장소를 가지려면?

시나리오

두 명의 사용자가 들어왔을 때 각각 독립적인 상태를 가지고, 유저의 클릭 이벤트에 따라 로그인 모달 창이 열리거나 닫혀야 한다.

만약 모달 상태를 저장하는 store를 단순히 객체로 구성했다면 이런 식이다.

이 상태로 빌드가 된 다음 배포가 되었을 때 문제는 무엇일까?

const modalStoreModule = {
  namespaced: true,
  state: {
    isOn: {
      login: false,
    },
  },
  mutations,
  actions,
};

export default modalStoreModule

문제는 바로 두 명의 사용자가 각각 독립된 모달 상태 저장소를 가지고 있지 않다는 것이다.

첫 번째 사용자가 로그인을 하기 위해 로그인 모달창을 열었을 때, login의 상태는 true로 바뀌게 된다.

그리고 첫번째 사용자가 브라우저를 종료한 후, 두 번째 사용자가 페이지에 들어왔을 때 로그인 모달 창을 열지 않았음에도 로그인 창을 보게 된다.

 

왜냐하면 store의 isOn.Login의 값은 여전히 true이기 때문이다.

필자도 Vue 초보다. 최근에 알았다..ㅠ

이러한 어이없는 상황을 방지하기 위해서는 아래 코드와 같이 store를 함수로 구현하여 각 사용자가 페이지에 방문했을 때 독립적인 상태 저장소를 가질 수 있도록 해주어야 한다.

const createModalStoreModule = () => ({
  namespaced: true,
  state: {
    isOn: {
      login: false,
    },
  },
  mutations,
  actions,
});

export default createModalStoreModule

createModalStoreModule는 이렇게 사용한다.

// index.ts
import createModalStoreModule from './modules/modal'

const store = new Vuex.Store({
  modules: {
    modalStore: createModalStoreModule()
  }
})

 

모달 창으로 아주 간단한 예시를 들었지만, 유저의 닉네임과 같은 정보를 저장한다던지 독립적인 상태의 저장이 필요한 부분을 생각해볼 수 있다.

또, 꼭 그렇지 않다고 하더라도 혹시나 하는 상황을 방지하기 위해 이러한 형태로 코드를 구성하는 게 좋지 않을까라는 생각도 든다.

 

잘못된 정보나 제가 잘못 알고 있는 부분이 있다면 언제든지 알려주세요!