vuejs 초보자의 짧은 vuex 사용 팁

이 글은 정리된 내용이 아니라 도움이 되지 않을 확률이 높음.

초보자가 공부하면서 찾은 내용을 적은 것이라 두서없음

---

vuex의 strict 설정

vuex의 export const strict = false; 설정을 하지 않으면 store 객체를 form에 직접 매칭하고 변경이 불가능하다.

원래 store의 데이터는 mutation으로 변경을 처리해야 하지만 form에 store의 객체를 직접 매칭 하게 되면 이 원칙이 깨지게 된다.

결국 어쩔 수 없이 strict를 false 처리해야 하는데 의외로 vuex 가이드에서도 배포할 때 strict true를 쓰지 말라고 한다.

(성능 비용이 많이 들어간다는 이유로)

https://vuex.vuejs.org/guide/strict.html

vuex의 변이 감지

vuex store의 데이터가 변경되는 것을 감지하는 것은 해당 객체 자체가 변경된 것만을 감지하는 것 같다.

(이거는 확실하지 않지만 개인 공부하면서 테스트한 경우는 그랬음)

따라서 특정 store의 객체가 변경된 것을 감지하고자 한다면 아예 해당 객체를 새로 설정하는 식으로 처리를 해야 한다.

예를 들어 다음과 같은 store 객체가 있다고 하면

export const state = () => ({
  loginInfo: { name: null, login: false }
});

export const mutations = {
  setLoginInfo(state, loginInfo) {
    state.loginInfo = loginInfo;
    state.isLoginInfoLoaded = true;
  }
};

해당 loginInfo 객체를 변경할 때는 아예 다음처럼 변경해야 한다.

export default {
  name: "BlueskyNavBar",
  computed: {
    ...mapState({
      loginInfo: state => state.loginInfo.loginInfo,
    })
  },
  methods: {
    ...mapMutations({
      setLoginInfo: "loginInfo/setLoginInfo"
    }),
    someFunction: function() {
    	// setLoginInfo로 변경하면 당연히 감지가 됨
        // 하지만 form 바인딩과 같은 경우 mutation을 사용하지 않게 됨
        
        // 이렇게 한 경우 watch는 동작하지 않음
        loginInfo.name = "테스트";
        loginInfo.login = true;
        
        // 이렇게 바꿔야 watch가 동작함
        loginInfo = {
        	name : "테스트",
            login : true
        }
    }
  },
  watch: {
  	loginInfo() {
    	console.log("loginInfo watch!!");
    }
  }
}

store data의 초기값으로 null을 사용하지 말 것

위의 loginInfo를 서버로부터 호출해서 사용하려고 했다.

이 경우 로딩 중 -> ajax 호출 후 설정의 과정을 거치는데 로딩 중을 표현하기 위한 기준으로 store의 null 여부를 처리했었다.

그런데 이런 경우 만약 ajax 호출이 장애가 나거나 이미 호출된 상태인데 재호출을 하고자 하는 경우 기준점을 잡기 애매했다.

또한 로딩이 완료되지 않은 상태에서 vue 페이지에서 {{ loginInfo.name }}  과 같이 사용할 수 없기 때문에 로딩 여부 체크를 매 코드마다 심어야 했다.

호출 여부를 별도로 관리하고 해당 json의 형태를 유지해야 호출 시점에 비동기 처리에 대한 고민을 덜하게 되어 코드 개발이 더 간결해지는 것 같다.

export const state = () => ({
  loginInfo: { name: null, login: false },
  isLoginInfoLoaded: false
});