20200512

Bindung·2020년 5월 12일
0

Today I Learned

목록 보기
7/16
post-thumbnail

스터디 내용

  • 어제 하루는 개인적인 사정으로 공부를 못했다. 불찰이다. 그래서 오늘은 좀더 집중했다.
  • 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"])
  }
}
  • 편했지만 결국 과하게 사용하면 과부하가오며 중요한 공통정보를 엮을때 쓰는 것 같다.
profile
포기하지말고 천천히...

0개의 댓글