TIL - 41 : Vue, Vuex

in Study Log on Today I learned
TIL - 41 : Vue, Vuex

Vue

  • 데이터들 저장
    • export default{ data() { return { data:data } } }
  • 함수
    • export default{ methods: { countUp() { this.data++ } } }

  • data의 접근은 this. 키워드를 붙임

  • 컴포넌트 사용 단계
    • 컴포넌트.vue 를 만든다.
    • export default { name: 컴포넌트이름 } export 한다.
    • 받는 곳에서 import를 한다.
    • 받는곳에서 export default { components: { 작명 : 컴포넌트이름} } 을 한다.
  • Props 전달 방법
    • <Component :props="props" :another_props="another_props">
      이렇게 컴포넌트에 v-bind 해서 전달 해 준다.
    • 받는곳에서 export default { props: { props_name : data타입 } }
  • 자식에서 부모로 자료 전달 방법
    • 자식에서 클릭 이벤트를 주어야 할때 <div @click="$emit('openModal', item.data)></div>
      • $emit() 이라는 것으로 보냄 첫번째 인자는 이벤트 이름 두번째는 전달 할 데이터(생략가능)
    • 부모에는 @openModal="OpenCloseModal=true; id=$event;"
      • 앞에 전달받은 이벤트 이름과 함께 클릭 했을때 실행 할 함수나 데이터를 설정
      • 전달받은 데이터는 $event로 받음
  • emit은 함수로도 만들어서 쓸 수 있음

Vuex

  • vuex 는 vue의 전역 상태 관리

  • 데이터의 흐름

    • Backend API <-> Actions -(Commit)-> Mutations -(Mutate)-> State

    • State: 공통으로 사용할 변수
    • Mutation: State를 변경하는 변수, Action에서 State를 수정하려면 필수
  • 접근방법
    • State : this.$store.state.items
    • Mutation : context.commit('MUTATION_NAME', data)
    • Dispatch : this.$store.dispatch('MUTATION_NAME')
  • template에 표시
    • 반복문 <div v-for="data in this.$store.state.data"></div>
    • mapState로 줄여서 할 수 있음
  • 코드의 양이 많아지면 모듈화

© 2022.02 by sunnyfterrain