Як керувати станом в Nuxt 3?
useState - Вбудований
javascript
// composables/useCounter.ts
export const useCounter = () => {
const count = useState('counter', () => 0);
const increment = () => count.value++;
return { count, increment };
};
// В будь-якому компоненті
const { count, increment } = useCounter();
// Спільний між усіма компонентами!Pinia - Для складного стану
javascript
// stores/user.ts
export const useUserStore = defineStore('user', () => {
const user = ref(null);
const isLoggedIn = computed(() => !!user.value);
async function login(credentials) {
user.value = await $fetch('/api/login', {
method: 'POST',
body: credentials
});
}
return { user, isLoggedIn, login };
});
// В компоненті
const userStore = useUserStore();
await userStore.login({ email, password });Порівняння
| Особливість | useState | Pinia |
|---|---|---|
| Налаштування | Нуль | Мінімальне |
| SSR | Вбудоване | Підтримується |
| DevTools | Ні | Так |
| Модульність | Ручна | Вбудована |
| Найкраще для | Просте | Складне |
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.