Vue (5)

Provide / inject

• 특정한 두 컴포넌트 사이에 중첩된 컴포넌트가 있는 구조의 경우, 데이터를 주고받을 때 사이에 중첩되어있는 컴포넌트에서 데이터를 전달해주는 역할을 수행해야 함 ... 번거로운 작업이 될 것
• 즉, 조상 컴포넌트에서 특정한 후손 컴포넌트에서 바로 데이터를 전달할 때는 Probide / Inject 를 사용한다.
  부모 - 자식 컴포넌트에서는 props

provide() {
	return {
    	msg: this.msg
    }
}

// ---
inject: {
	msg
}

• provide 로 제공하는 데이터는 반응성을 가지지 않아서 화면이 바뀌어도 반영되지 않음 ... vue 의 computed 필요

import { computed } from 'vue'

provide() {
	return {
    	msg: computed(() => this.msg)
    }
{

이 경우, 사용할 때 msg.value 와 같이 value 를 불러와야 함

---

Vuex(Store)

• Vuex: Vue 애플리케이션에 대한 상태 관리 패턴 + 라이브러리
  npm i vuex@next
• Store: 아무런 관계가 없는 컴포넌트끼리의 데이터를 주고받을 수 있는 방식
• context
  state: 상태를 참조하는 객체
  getters: 계산된 상태를 참조하는 객체
  commit: mutation 을 실행할 수 있는 객체
  dispatch: 다른 action 을 실행할 수 있는 객체

---

회고

과제를 위해 Vue (5) 의 초반 내용은 건너뛰고 다음에 듣기로..
store 를 총해 애플리케이션 전반에 걸친 상태를 관리할 수 있는 방법을 배우는 시간이었다.
상태를 한곳에 넣고 관리하는 방식이지만, 컴포넌트가 많아질수록 각각의 상태가 늘어날탠데, 컴포넌트마다 state 를 정리한 파일들을 만들어줘야 하는지 의문이 생겨 더 공부해봐야 겠다.