22_03_16_Wed.md

[22.03.16.Wed] - Day 24

Vue.js

• CurrencyFormatter (mixin 실습)
• Vuex
  • 상태 관리 패턴 + 라이브러리
  • 중앙 집중식 저장소 (모든 컴포넌트에서 접근 가능)
    • createStore
    • 어떤 데이터 관리?
      • 무조건 사용자 정보!
        • 로그인한 사용자 정보 관리
      • 장바구니
      • to do list, ...
  • 예측 가능한 방식으로만 상태가 변경되도록 하는 규칙 있음
  • state
    • mutation을 통해서만 state 변경 가능
    • mutation에서는 비동기 처리 불가
  • mutation
    • 컴포넌트에서 mutation에 있는 함수 호출 위해서는 $store.commit()
  • actions애 있는 함수는 비동기 처리 가능
    • async/await 또는 promise 이용
    • 서버에 비동기 함수 처리할 때 활용
    • commit(mutation 함수 이름, 전달할 파라미터)
    • action에 정의된 함수를 컴포넌트에서 호출 위해서는 $store.dispatch() 사용
  • modules
    • namespaced=true
• Router
  • beforeEach
    • to, from ,next
    • 사용자 행동 패턴 분석 가능
    • 로그인 이후 시스템 내부 페이지로 진입할 때 많이 활용
      • 로그인 안되어있으면 계속 메인 페이지로 redirect

[Note]

• computed
  • 다른 데이터 참조해서 새로운 데이터 만듦
• vue-cookie
  • 사용자 정보 유지 시간 설정 가능
  • 시간 지나면 자동으로 데이터 삭제됨
  • 강제 로그아웃 시켜서 메인 페이지로 redirect 가능
• vuex-persistedstate
  • store에 저장된 것이 웹 브라우저의 localStorage에 저장됨
  • 개발자 도구에서 바로 볼 수 있는 문제 발생 가능
  • 시간 설정은 불가

Source Code