11. 상태 관리

Nuxt는 구성 요소 전체에 반응적이고 SSR 친화적인 공유 상태를 생성할 수 있는 useState 컴포저블을 제공한다.

useState 는 SSR 친화적인 ref 대체품이다. 해당 값은 서버 측 렌더링 후(클라이언트 측 하이드레이션 중) 유지되며 고유 키를 사용하여 모든 구성 요소에서 공유된다.

useState 내부 데이터는 JSON으로 직렬화되기 때문에 클래스, 함수, 심볼 등 직렬화할 수 없는 어떤 것도 포함하지 않는 것이 중요하다.

 

베스트 프랙티스

const state = ref() 를 <script setup> 혹은 setup() 외부에서 정의하면 안된다. 이러한 state 상태는 웹사이트를 방문하는 모든 사용자에게 공유되며 메모리 누수로 이어질 수 있다. 아래 처럼 사용하길 권장한다.

const useX = () => useState('x')

 

Examples

기본 사용법

이 예에서는 컴포넌트-로컬 카운터 상태를 사용합니다.  useState('counter') 를 사용하는 다른 컴포넌트는동일한 반응 상태를 공유합니다.

<!--
app.vue
-->

<script setup lang="ts">
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>

<template>
  <div>
    Counter: {{ counter }}
    <button @click="counter++">
      +
    </button>
    <button @click="counter--">
      -
    </button>
  </div>
</template>

참고) 라이브 참조 Docs > Examples > Features > State Management

 

고급 사용법

이 예에서는 HTTP 요청 헤더에서 사용자의 기본 언어를 감지하고 이를 locale 상태로 유지하는 컴포저블을 사용한다.

// composables/locale.ts

import type { Ref } from 'vue'

export const useLocale = () => {
  return useState<string>('locale', () => useDefaultLocale().value)
}

export const useDefaultLocale = (fallback = 'en-US') => {
  const locale = ref(fallback)
  if (process.server) {    
    const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
    if (reqLocale) {
      locale.value = reqLocale
    }
  } else if (process.client) {
    const navLang = navigator.language
    if (navLang) {
      locale.value = navLang
    }
  }
  return locale
}

export const useLocales = () => {
  const locale = useLocale()
  const locales = ref([
    'en-US',
    'en-GB',
    ...
    'ja-JP-u-ca-japanese'
  ])
  if (!locales.value.includes(locale.value)) {
    locales.value.unshift(locale.value)
  }
  return locales
}

export const useLocaleDate = (date: Ref<Date> | Date, locale = useLocale()) => {
  return computed(() => new Intl.DateTimeFormat(locale.value, { dateStyle: 'full' }).format(unref(date)))
}

<!--
app.vue
-->

<script setup lang="ts">
const locales = useLocales()
const locale = useLocale()
const date = useLocaleDate(new Date('2016-10-26'))
</script>

<template>
  <div>
    <h1>Nuxt birthday</h1>
    <p>{{ date }}</p>    
    <label for="locale-chooser">Preview a different locale</label>
    <select id="locale-chooser" v-model="locale">
      <option v-for="locale of locales" :key="locale" :value="locale">
        {{ locale }}
      </option>
    </select>
  </div>
</template>

 

공유 상태

자동으로 임포트된 컴포저블을 사용하면 유형이 안전한 전역 상태를 정의하고 앱 전체에서 가져올 수 있다.

export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')

<!--
app.vue
-->

<script setup lang="ts">
const color = useColor() // Same as useState('color')
</script>

<template>
  <p>Current color: {{ color }}</p>
</template>

 

써드 파티 라이브러리

Nuxt는 전역 상태 관리를 제공하기 위해 Vuex 라이브러리에 의존했었다 . Nuxt 2에서 마이그레이션하는 경우 마이그레이션 가이드를 참조하길 바란다.

Nuxt는 상태 관리에 대해 배타적이지 않으므로 필요에 맞는 솔루션을 자유롭게 선택하면 된다. 다음을 포함하여 가장 널리 사용되는 상태 관리 라이브러리가 있다.

• Pinia - 공식 Vue 추천
• Harlem - 불변의 전역 상태 관리
• XState - 상태 로직을 시각화하고 테스트하기 위한 도구를 사용한 상태 머신 접근 방식