feat(nuxt3): support init function for `useState` (#767)

packages/nuxt3/src/app/composables/state.ts

@@ -5,8 +5,13 @@ import { useNuxtApp } from '#app'
  * Create a global reactive ref that will be hydrated but not shared across ssr requests
  *
  * @param key a unique key to identify the data in the Nuxt payload
+ * @param init a function that provides initial value for state if it's not initiated
  */
-export const useState = <T> (key: string): Ref<T> => {
+export const useState = <T> (key: string, init?: (() => T)): Ref<T> => {
   const nuxt = useNuxtApp()
-  return toRef(nuxt.payload.state, key)
+  const state = toRef(nuxt.payload.state, key)
+  if (state.value === undefined && init) {
+    state.value = init()
+  }
+  return state
 }

playground/app.vue

@@ -15,10 +15,7 @@ const greetings = [
   'こんにちは',
   '你好'
 ]
-const hello = useState('hello')
-if (!hello.value) {
-  hello.value = greetings[Math.random() * greetings.length | 0]
-}
+const hello = useState('hello', () => greetings[Math.random() * greetings.length | 0])
 </script>
 
 <style scoped>