useState用于创建响应式的且服务端友好的跨组件状态，类似于Vue中的state的功能。
简单的需求只用useState就可以，复杂的话可以结合pinia

const counter = useState('counter', () => Math.round(Math.random() * 1000))
counter++
counter.value = 20 //重新赋值

const user = useState('user', () => {
  return {
    token: token.value,
    user: userObj.value
 }
})

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

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

// 初始化状态
大多数情况下，你可能希望使用异步解析的数据来初始化状态。你可以使用 app.vue 组件和 callOnce 工具函数来实现这一点。
<script setup lang="ts">
const websiteConfig = useState('config')

await callOnce(async () => {
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>