format: apply repo prettier (3.8.1) to the folded skills tree
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
This commit is contained in:
@@ -14,7 +14,7 @@ SSR-safe replacement for `ref` that shares state across components:
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
// State is shared by key 'counter' across all components
|
||||
const counter = useState('counter', () => 0)
|
||||
const counter = useState('counter', () => 0);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -33,19 +33,19 @@ Define reusable state composables:
|
||||
```ts
|
||||
// composables/useUser.ts
|
||||
export function useUser() {
|
||||
return useState<User | null>('user', () => null)
|
||||
return useState<User | null>('user', () => null);
|
||||
}
|
||||
|
||||
export function useLocale() {
|
||||
return useState('locale', () => 'en')
|
||||
return useState('locale', () => 'en');
|
||||
}
|
||||
```
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
// Same state instance everywhere
|
||||
const user = useUser()
|
||||
const locale = useLocale()
|
||||
const user = useUser();
|
||||
const locale = useLocale();
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -55,11 +55,11 @@ Use `callOnce` to initialize state with async data:
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const config = useState('site-config')
|
||||
const config = useState('site-config');
|
||||
|
||||
await callOnce(async () => {
|
||||
config.value = await $fetch('/api/config')
|
||||
})
|
||||
config.value = await $fetch('/api/config');
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -69,27 +69,27 @@ await callOnce(async () => {
|
||||
|
||||
```ts
|
||||
// ❌ Wrong - causes memory leaks and shared state across requests
|
||||
export const globalState = ref({ user: null })
|
||||
export const globalState = ref({ user: null });
|
||||
```
|
||||
|
||||
### ✅ Use useState Instead
|
||||
|
||||
```ts
|
||||
// ✅ Correct - SSR-safe
|
||||
export const useGlobalState = () => useState('global', () => ({ user: null }))
|
||||
export const useGlobalState = () => useState('global', () => ({ user: null }));
|
||||
```
|
||||
|
||||
## Clearing State
|
||||
|
||||
```ts
|
||||
// Clear specific state
|
||||
clearNuxtState('counter')
|
||||
clearNuxtState('counter');
|
||||
|
||||
// Clear multiple states
|
||||
clearNuxtState(['counter', 'user'])
|
||||
clearNuxtState(['counter', 'user']);
|
||||
|
||||
// Clear all state (use with caution)
|
||||
clearNuxtState()
|
||||
clearNuxtState();
|
||||
```
|
||||
|
||||
## With Pinia
|
||||
@@ -108,38 +108,38 @@ export const useCounterStore = defineStore('counter', {
|
||||
}),
|
||||
actions: {
|
||||
increment() {
|
||||
this.count++
|
||||
this.count++;
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
```ts
|
||||
// stores/user.ts (Composition API style)
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
const user = ref<User | null>(null)
|
||||
const isLoggedIn = computed(() => !!user.value)
|
||||
const user = ref<User | null>(null);
|
||||
const isLoggedIn = computed(() => !!user.value);
|
||||
|
||||
async function login(credentials: Credentials) {
|
||||
user.value = await $fetch('/api/login', {
|
||||
method: 'POST',
|
||||
body: credentials,
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
return { user, isLoggedIn, login }
|
||||
})
|
||||
return { user, isLoggedIn, login };
|
||||
});
|
||||
```
|
||||
|
||||
```vue
|
||||
<script setup lang="ts">
|
||||
const counterStore = useCounterStore()
|
||||
const userStore = useUserStore()
|
||||
const counterStore = useCounterStore();
|
||||
const userStore = useUserStore();
|
||||
|
||||
// Initialize store data once
|
||||
await callOnce(async () => {
|
||||
await userStore.fetchUser()
|
||||
})
|
||||
await userStore.fetchUser();
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -148,22 +148,21 @@ await callOnce(async () => {
|
||||
```ts
|
||||
// composables/useLocale.ts
|
||||
export function useLocale() {
|
||||
return useState('locale', () => useDefaultLocale().value)
|
||||
return useState('locale', () => useDefaultLocale().value);
|
||||
}
|
||||
|
||||
export function useDefaultLocale(fallback = 'en-US') {
|
||||
const locale = ref(fallback)
|
||||
const locale = ref(fallback);
|
||||
|
||||
if (import.meta.server) {
|
||||
const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0]
|
||||
if (reqLocale) locale.value = reqLocale
|
||||
}
|
||||
else if (import.meta.client) {
|
||||
const navLang = navigator.language
|
||||
if (navLang) locale.value = navLang
|
||||
const reqLocale = useRequestHeaders()['accept-language']?.split(',')[0];
|
||||
if (reqLocale) locale.value = reqLocale;
|
||||
} else if (import.meta.client) {
|
||||
const navLang = navigator.language;
|
||||
if (navLang) locale.value = navLang;
|
||||
}
|
||||
|
||||
return locale
|
||||
return locale;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -178,15 +177,15 @@ export function useDefaultLocale(fallback = 'en-US') {
|
||||
|
||||
```ts
|
||||
// ❌ Won't work
|
||||
useState('fn', () => () => console.log('hi'))
|
||||
useState('instance', () => new MyClass())
|
||||
useState('fn', () => () => console.log('hi'));
|
||||
useState('instance', () => new MyClass());
|
||||
|
||||
// ✅ Works
|
||||
useState('data', () => ({ name: 'John', age: 30 }))
|
||||
useState('items', () => ['a', 'b', 'c'])
|
||||
useState('data', () => ({ name: 'John', age: 30 }));
|
||||
useState('items', () => ['a', 'b', 'c']);
|
||||
```
|
||||
|
||||
<!--
|
||||
<!--
|
||||
Source references:
|
||||
- https://nuxt.com/docs/getting-started/state-management
|
||||
- https://nuxt.com/docs/api/composables/use-state
|
||||
|
||||
Reference in New Issue
Block a user