useState

useState 컴포저블은 SSR에 적합한 반응형 공유 상태를 생성합니다.

 

사용법

// Create a reactive state and set default value
const count = useState('counter', () => Math.round(Math.random() * 100))

참고) Nuxt-개요 > 상태관리

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

 

shallowRef 사용

상태가 적극적으로 반응할 필요가 없다면 useState 와 shallowRef 를 결합할 수 있다. 이렇게 하면 상태에 큰 개체와 배열이 포함된 경우 성능이 향상될 수 있다.

const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactive' }))
// isShallow(state) === true

 

Type

useState<T>(init?: () => T | Ref<T>): Ref<T>
useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>

 

• key: 데이터 가져오기가 요청 전반에 걸쳐 적절하게 중복 제거되도록 보장하는 고유 키이다. 키를 제공하지 않으면 useState 인스턴스의 줄 번호와 파일이름을 이용한 고유한 키가 생성됩니다.
• init : 초기화되지 않았을 때 상태에 대한 초기값을 제공하는 함수. 이 함수는 Ref 를 반환할 수도 있다.
• T: (typescript에만 해당) 상태 유형을 지정한다.