Implementeer Vue.js Composables voor Geavanceerd Hergebruik van Logica
description
Met deze prompt kun je leren hoe je herbruikbare logica op een gestructureerde manier ontwikkelt met Vue.js composables, waardoor je code duplicatie vermindert en de onderhoudbaarheid van je frontend projecten verbetert. Het helpt je efficiënter te werken en maakt je codebase schaalbaarder dan alternatieve methoden zoals mixins of globale state oplossingen.
prompt
Help me bij het ontwikkelen van Vue.js composables om herbruikbare en deelbare logica in mijn project te creëren. Beschrijf hoe ik composables kan structureren, gebruiken en integreren binnen verschillende componenten om code dupl ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Het gebruik van Vue.js composables is een uitstekende manier om herbruikbare en deelbare logica te creëren, vooral voor veelgebruikte functionaliteiten zoals gebruikersauthenticatie. Hier is een overzicht van aanpak en best practices:
### 1. Structurering van composables
- **Map structureren:** Maak een map, bijvoorbeeld `composables/`, in je project.
- **Bestanden:** Maak aparte bestanden voor verschillende functionaliteiten, bijvoorbeeld:
- `useAuth.js` voor authenticatielogica
- **Bestandssamenstelling:** In `useAuth.js` definieer je functies en state gerelateerd aan login, logout en sessiestatus.
### 2. Implementatie van `useAuth` composable
Hier is een voorbeeld van hoe je dit zou kunnen doen:
```js
// composables/useAuth.js
import { ref } from 'vue';
export function useAuth() {
const user = ref(null);
const isAuthenticated = ref(false);
function login(credentials) {
// Hier zou je API-aanroep naar backend voor login plaatsen
// Voorbeeld:
// api.login(credentials).then(response => {
// user.value = response.user;
// isAuthenticated.value = true;
// });
// Voor demo:
user.value = { name: 'Gebruiker' };
isAuthenticated.value = true;
}
function logout() {
// API-aanroep voor logout
user.value = null;
isAuthenticated.value = false;
}
function checkSession() {
// Controleer sessiestatus, bijvoorbeeld via API of localStorage
// Voor demo:
const storedUser = localStorage.getItem('user');
if (storedUser) {
user.value = JSON.parse(storedUser);
isAuthenticated.value = true;
}
}
// Optioneel: automatisch sessie controleren bij eerste gebruik
checkSession();
return {
user,
isAuthenticated,
login,
logout
};
}
```
### 3. Gebruik binnen componenten
In je componenten (bijvoorbeeld in profiel, dashboard, instellingen) importeer je de composable:
```vue
<script setup>
import { useAuth } from '@/composables/useAuth';
const { user, isAuthenticated, login, logout } = useAuth();
function handleLogin() {
login({ username: 'test', password: '1234' });
}
function handleLogout() {
logout();
}
</script>
<template>
<div>
<div v-if="isAuthenticated">
<p>Welkom, {{ user.name }}</p>
<button @click="handleLogout">Uitloggen</button>
</div>
<div v-else>
<button @click="handleLogin">Inloggen</button>
</div>
</div>
</template>
```
### 4. Hergebruik en onderhoudbaarheid
- **Herbruikbaarheid:** Door `useAuth()` overal te gebruiken, heb je consistente login/logout logica.
- **Shared state:** De `ref`s in de composable zorgen voor gedeelde status tussen componenten.
- **Aanpassing:** Als je bijvoorbeeld OAuth of token-opslag toevoegt, pas je alleen `useAuth.js` aan.
### 5. Overwegingen
- Voor complexere sessiebeheer over meerdere tabs, kijk naar Vuex of de Vue 3 Composition API met `provide/inject`.
- Voor persistentie, gebruik `localStorage`, `sessionStorage`, of cookies.
- Overweeg het gebruik van een globale store (bijvoorbeeld Pinia) voor uitgebreide state management.
---
Door composables op deze manier te structureren, reduceer je code duplicatie, verbeter je de onderhoudbaarheid en maak je je project schaalbaar en overzichtelijk.
provider: deepseek
model: deepseek-chat
Zeker! Ik help je bij het ontwikkelen van Vue.js composables voor gebruikersauthenticatie. Hier is een complete handleiding in het Nederlands.
### 1. Basisstructuur van een Composable
Een Vue composable is een functie die gebruik maakt van de Composition API om herbruikbare stateful logica te creëren.
```javascript
// composables/useAuth.js
import { ref, computed } from 'vue'
export function useAuth() {
// State - gebruik ref voor reactieve data
const user = ref(null)
const isLoading = ref(false)
const error = ref(null)
// Getters - gebruik computed voor afgeleide data
const isLoggedIn = computed(() => !!user.value)
const userName = computed(() => user.value?.name || '')
// Actions - functies die state aanpassen
const login = async (email, password) => {
isLoading.value = true
error.value = null
try {
// Je API call hier
const response = await fetch('/api/login', {
method: 'POST',
body: JSON.stringify({ email, password })
})
if (response.ok) {
user.value = await response.json()
localStorage.setItem('user', JSON.stringify(user.value))
} else {
throw new Error('Login mislukt')
}
} catch (err) {
error.value = err.message
} finally {
isLoading.value = false
}
}
const logout = async () => {
try {
await fetch('/api/logout')
user.value = null
localStorage.removeItem('user')
} catch (err) {
error.value = err.message
}
}
const checkAuthStatus = () => {
const storedUser = localStorage.getItem('user')
if (storedUser) {
user.value = JSON.parse(storedUser)
}
}
// Expose alles wat componenten nodig hebben
return {
// State
user,
isLoading,
error,
// Getters
isLoggedIn,
userName,
// Actions
login,
logout,
checkAuthStatus
}
}
```
### 2. Gebruik in Verschillende Componenten
#### Profielpagina Component
```vue
<!-- components/ProfilePage.vue -->
<template>
<div>
<div v-if="isLoading">Laden...</div>
<div v-else-if="error" class="error">{{ error }}</div>
<div v-else>
<h1>Welkom, {{ userName }}</h1>
<button @click="logout">Uitloggen</button>
</div>
</div>
</template>
<script setup>
import { useAuth } from '@/composables/useAuth'
const { user, userName, isLoggedIn, isLoading, error, logout } = useAuth()
</script>
```
#### Dashboard Component
```vue
<!-- components/Dashboard.vue -->
<template>
<div>
<div v-if="!isLoggedIn">
<p>Je moet ingelogd zijn om het dashboard te zien.</p>
<LoginForm />
</div>
<div v-else>
<h1>Dashboard</h1>
<p>Hallo {{ userName }}, welkom terug!</p>
<!-- Dashboard content -->
</div>
</div>
</template>
<script setup>
import { useAuth } from '@/composables/useAuth'
import LoginForm from '@/components/LoginForm.vue'
const { isLoggedIn, userName } = useAuth()
</script>
```
#### Instellingenpagina Component
```vue
<!-- components/SettingsPage.vue -->
<template>
<div>
<h1>Instellingen</h1>
<div v-if="isLoggedIn">
<p>Ingelogd als: {{ user.email }}</p>
<button @click="handleLogout">Uitloggen</button>
</div>
</div>
</template>
<script setup>
import { useAuth } from '@/composables/useAuth'
const { user, isLoggedIn, logout } = useAuth()
const handleLogout = async () => {
if (confirm('Weet je zeker dat je wilt uitloggen?')) {
await logout()
// Redirect naar home pagina
}
}
</script>
```
### 3. Geavanceerde Pattern: Auth Provider Composable
Voor complexere scenario's kun je een auth provider pattern implementeren:
```javascript
// composables/useAuthProvider.js
import { provide, inject } from 'vue'
const AuthSymbol = Symbol('auth')
export function provideAuth() {
const auth = useAuth() // Gebruik onze basis composable
provide(AuthSymbol, auth)
return auth
}
export function useAuthContext() {
const auth = inject(AuthSymbol)
if (!auth) {
throw new Error('useAuthContext moet gebruikt worden binnen een AuthProvider')
}
return auth
}
```
### 4. Best Practices voor Composable Structuur
1. **Conventie voor bestandsnamen**: Gebruik `use` prefix (useAuth.js, useUser.js)
2. **Eén verantwoordelijkheid**: Elke composable heeft één specifieke taak
3. **Duidelijke returns**: Groepeer gerelateerde state en methods
4. **Error handling**: Consistent error management in alle composables
5. **TypeScript support** (optioneel): Voeg types toe voor betere developer experience
### 5. Integratie in je Main App
```vue
<!-- App.vue -->
<template>
<div id="app">
<nav>
<span v-if="isLoggedIn">Ingelogd als: {{ userName }}</span>
<button v-if="isLoggedIn" @click="logout">Uitloggen</button>
</nav>
<router-view />
</div>
</template>
<script setup>
import { onMounted } from 'vue'
import { useAuth } from '@/composables/useAuth'
const { isLoggedIn, userName, logout, checkAuthStatus } = useAuth()
// Check auth status bij app startup
onMounted(() => {
checkAuthStatus()
})
</script>
```
### 6. Testen van Composable (voorbeeld met Vitest)
```javascript
// tests/useAuth.test.js
import { describe, it, expect } from 'vitest'
import { useAuth } from '@/composables/useAuth'
describe('useAuth', () => {
it('moet initieel niet ingelogd zijn', () => {
const { isLoggedIn } = useAuth()
expect(isLoggedIn.value).toBe(false)
})
// Meer tests...
})
```
### Voordelen van deze Aanpak
- **Herbruikbaarheid**: Zelfde logica in meerdere componenten
- **Onderhoudbaarheid**: Centrale plek voor auth-logica
- **Testbaarheid**: Makkelijk te testen zonder componenten
- **Type-safe**: Goede TypeScript ondersteuning
- **Schaalbaarheid**: Eenvoudig uit te breiden met nieuwe features
Deze structuur zorgt voor consistente, onderhoudbare code en vermindert code-duplicatie aanzienlijk in je Vue.js project!