20200512

스터디 내용

• 어제 하루는 개인적인 사정으로 공부를 못했다. 불찰이다. 그래서 오늘은 좀더 집중했다.
• Vuex를 이용하여 State, Mutation, Action을 이용해 로그인정보를 유지하는 기법을 스터디했다.

스터디 후기

• Vuex는 중요한 정보를 프로젝트내에 공통적으로 쓰이거나 중요정보를 중심에서 잡아주는 것 같았다.
• 아마도 Vuex에 모든 정보를 엮어버리면 편하겠지만 그로인한 과부하도 보일 듯 했다.
• State : 상태 값지정 (isLogin: false, isLoginError: false)
• Mutation : 변이 - 값을 바로 접근 못하게 여기서 관리한다

loginSuccess(state) {
	state.isLogin = true
    state.isLoginError = false
}

• Action : 컨트롤러 역할을 한다.

// 로그인 시도
login({ state, commit }, loginObj) {
  //전체 유저에서 해당 이메일로 유저를 찾는다.
  let selectedUser = null
  state.allUser.forEach(user => {
    if (user.email === loginObj.email) selectedUser = user
  })
  selectedUser === null
    ? commit("loginError")
  : selectedUser.password !== loginObj.password
    ? commit("loginError")
  : commit("loginSuccess")
  //그 유저의 비밀번호와 입력된 비밀번호를 비교한다.
}

• store(vuex) 불러오는 방법

import { mapState, mapActions } from "vuex"
export default {
  name: "login",
  data() {
    return {
      email: null,
      password: null
    }
  },
  computed: {
    ...mapState(["isLogin", "isLoginError"])
  },
  methods: {
    ...mapActions(["login"])
  }
}

• 편했지만 결국 과하게 사용하면 과부하가오며 중요한 공통정보를 엮을때 쓰는 것 같다.