기본적으로 모든 Vue 컴포넌트 인스턴스들은 본인 내부의 반응형 상태들을 **‘관리’**한다.
💡 이제 vue 어플리케이션 전체라는 전역적 관점에서 논의를 진행하기 위해 각 컴포넌트들을 인스턴스로 고려할 필요가 있다.
그리고 vue어플리케이션 자체도 하나의 인스턴스이고, 이는 사용자의 브라우저에 빌드된다.
따라서 프론트엔드 어플리케이션은 백엔드와 다르게 상태유지가 가능하다. 개인화된 브라우저에 어플리케이션 전체가 빌드되어서 올라가기 때문이다. - 공유에 대한 리스크가 줄어든다.
다만 새로고침등을 할때 어플리케이션이 다시 빌드되어서 올라가기때문에 초기화될 뿐임.
간단한 카운터 컴포넌트를 예시로 보자.
<script setup>
import { ref } from 'vue'
// 상태(State)
const count = ref(0)
// 기능(Actions)
function increment() {
count.value++
}
</script>
<!-- 뷰(view) -->
<template>{{ count }}</template>
위 구조를 보면 컴포넌트는 다음의 세 구조로 나뉜다.
그리고 위의 세가지 구조는 단일 컴포넌트 내에서는 다음의 흐름을 갖는다. (단방향)
하지만 상태를 여러 컴포넌트가 공유하기 시작하면 위의 흐름은 깨진다.
간단한 솔루션은 여러 컴포넌트에서 공유되는 상태를 추출하고 이를 전역적인 싱글톤 객체에서 관리하는 것이다.