Creëer een dynamische Vue.js applicatie met Vue Router en Vuex
description
Met deze prompt leer je hoe je een gestructureerde Vue.js applicatie bouwt met moderne tools voor navigatie en state management, wat zorgt voor schaalbaarheid en onderhoudbaarheid. Het richt zich op praktische toepassing en helpt je complexe frontend projecten beter te organiseren dan basiscomponent optimalisatie.
prompt
Help me een Vue.js applicatie te bouwen die gebruikmaakt van Vue Router voor navigatie en Vuex voor state management. Beschrijf hoe ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een overzicht van hoe je een Vue.js applicatie kunt opzetten met Vue Router en Vuex voor een webshop:
1. Projectstructuur opzetten:
Maak een Vue-project aan met Vue CLI:
```bash
vue create webshop
cd webshop
```
Installeer Vue Router en Vuex:
```bash
npm install vue-router vuex
```
2. Routes definiëren:
Maak een router-bestand, bijvoorbeeld `src/router/index.js`:
```js
import Vue from 'vue';
import Router from 'vue-router';
// Importeer je componenten
import Home from '@/components/Home.vue';
import ProductDetails from '@/components/ProductDetails.vue';
import Cart from '@/components/Cart.vue';
import Checkout from '@/components/Checkout.vue';
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/product/:id',
name: 'ProductDetails',
component: ProductDetails,
props: true,
},
{
path: '/cart',
name: 'Cart',
component: Cart,
},
{
path: '/checkout',
name: 'Checkout',
component: Checkout,
},
],
});
```
3. Componenten koppelen:
In je hoofd `App.vue` importeer je de router:
```vue
<template>
<div id="app">
<nav>
<!-- Navigatie links -->
<router-link to="/">Home</router-link>
<router-link to="/cart">Winkelwagen</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
};
</script>
```
Per route maak je aparte componenten:
- `Home.vue`: toont productoverzicht
- `ProductDetails.vue`: toont details van een product
- `Cart.vue`: toont winkelwageninhoud
- `Checkout.vue`: afrekenen
4. Vuex voor centraal state management:
Maak een store-bestand `src/store/index.js`:
```js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
producten: [], // lijst met producten
winkelwagen: [], // producten in winkelwagen
},
mutations: {
setProducten(state, producten) {
state.producten = producten;
},
voegAanWinkelwagen(state, product) {
const existing = state.winkelwagen.find(p => p.id === product.id);
if (existing) {
existing.aantal += 1;
} else {
state.winkelwagen.push({ ...product, aantal: 1 });
}
},
verwijderUitWinkelwagen(state, productId) {
state.winkelwagen = state.winkelwagen.filter(p => p.id !== productId);
},
resetWinkelwagen(state) {
state.winkelwagen = [];
},
},
actions: {
haalProductenOp({ commit }) {
// Hier zou je API call kunnen plaatsen
const dummyProducten = [
{ id: 1, naam: 'Product 1', prijs: 10 },
{ id: 2, naam: 'Product 2', prijs: 20 },
];
commit('setProducten', dummyProducten);
},
voegProductToe({ commit }, product) {
commit('voegAanWinkelwagen', product);
},
verwijderProduct({ commit }, productId) {
commit('verwijderUitWinkelwagen', productId);
},
},
getters: {
aantalInWinkelwagen: (state) => {
return state.winkelwagen.reduce((totaal, p) => totaal + p.aantal, 0);
},
totaalPrijs: (state) => {
return state.winkelwagen.reduce((totaal, p) => totaal + p.prijs * p.aantal, 0);
},
},
});
```
In je `main.js` importeer je de store en router:
```js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');
```
5. Gebruik van Vuex in componenten:
In bijvoorbeeld `Home.vue`:
```vue
<template>
<div>
<h1>Productoverzicht</h1>
<ul>
<li v-for="product in producten" :key="product.id">
<router-link :to="{ name: 'ProductDetails', params: { id: product.id } }">
{{ product.naam }} - €{{ product.prijs }}
</router-link>
<button @click="voegToe(product)">In winkelwagen</button>
</li>
</ul>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
name: 'Home',
computed: {
...mapState(['producten']),
},
methods: {
...mapActions(['haalProductenOp', 'voegProductToe']),
voegToe(product) {
this.voegProductToe(product);
},
},
created() {
this.haalProductenOp();
},
};
</script>
```
In `Cart.vue`:
```vue
<template>
<div>
<h1>Winkelwagen</h1>
<ul>
<li v-for="item in winkelwagen" :key="item.id">
{{ item.naam }} x{{ item.aantal }} - €{{ item.prijs * item.aantal }}
<button @click="verwijder(item.id)">Verwijder</button>
</li>
</ul>
<p>Totaal: €{{ totaalPrijs }}</p>
<router-link to="/checkout">Afrekenen</router-link>
</div>
</template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
computed: {
...mapState(['winkelwagen']),
...mapGetters(['totaalPrijs']),
},
methods: {
...mapActions(['verwijderProduct']),
verwijder(id) {
this.verwijderProduct(id);
},
},
};
</script>
```
Kort samengevat:
- Definieer je routes in `router/index.js` en koppel je deze aan componenten.
- Importeer en gebruik `<router-view>` in `App.vue` voor weergave.
- Gebruik Vuex voor het beheren van producten en winkelwagenstatus.
- Componenten communiceren via Vuex-actions, mutations, state en getters.
Zo heb je een overzichtelijke, schaalbare Vue.js webshop met gescheiden routing en state management!
provider: deepseek
model: deepseek-chat
Zeker, ik help je graag op weg. Hier is een gestructureerde handleiding voor jouw Vue.js webshop:
## 1. Project Setup
```bash
npm create vue@latest
# Kies: Vue Router, Vuex/Pinia, ESLint
```
## 2. Router Configuratie (router/index.js)
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Products from '../views/Products.vue'
import ProductDetail from '../views/ProductDetail.vue'
import Cart from '../views/Cart.vue'
import Checkout from '../views/Checkout.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/products',
name: 'Products',
component: Products
},
{
path: '/product/:id',
name: 'ProductDetail',
component: ProductDetail,
props: true
},
{
path: '/cart',
name: 'Cart',
component: Cart
},
{
path: '/checkout',
name: 'Checkout',
component: Checkout
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
## 3. Vuex Store (store/index.js)
```javascript
import { createStore } from 'vuex'
export default createStore({
state: {
products: [],
cart: [],
user: null
},
mutations: {
SET_PRODUCTS(state, products) {
state.products = products
},
ADD_TO_CART(state, product) {
const existingItem = state.cart.find(item => item.id === product.id)
if (existingItem) {
existingItem.quantity++
} else {
state.cart.push({ ...product, quantity: 1 })
}
},
REMOVE_FROM_CART(state, productId) {
state.cart = state.cart.filter(item => item.id !== productId)
},
UPDATE_QUANTITY(state, { productId, quantity }) {
const item = state.cart.find(item => item.id === productId)
if (item) {
item.quantity = quantity
}
},
CLEAR_CART(state) {
state.cart = []
}
},
actions: {
async fetchProducts({ commit }) {
const response = await fetch('/api/products')
const products = await response.json()
commit('SET_PRODUCTS', products)
},
addToCart({ commit }, product) {
commit('ADD_TO_CART', product)
},
removeFromCart({ commit }, productId) {
commit('REMOVE_FROM_CART', productId)
}
},
getters: {
cartTotal: state => {
return state.cart.reduce((total, item) => total + (item.price * item.quantity), 0)
},
cartItemCount: state => {
return state.cart.reduce((count, item) => count + item.quantity, 0)
}
}
})
```
## 4. Componenten Koppelen
**App.vue:**
```vue
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/products">Producten</router-link>
<router-link to="/cart">
Winkelwagen ({{ cartItemCount }})
</router-link>
</nav>
<router-view />
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters(['cartItemCount'])
}
}
</script>
```
**ProductCard.vue:**
```vue
<template>
<div class="product-card">
<h3>{{ product.name }}</h3>
<p>€{{ product.price }}</p>
<button @click="addToCart">In winkelwagen</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
props: ['product'],
methods: {
...mapActions(['addToCart']),
addToCart() {
this.addToCart(this.product)
}
}
}
</script>
```
## 5. Navigatie in Componenten
```vue
<script>
export default {
methods: {
goToProductDetail(productId) {
this.$router.push({ name: 'ProductDetail', params: { id: productId } })
},
goToCheckout() {
this.$router.push('/checkout')
}
}
}
</script>
```
## 6. Belangrijke Tips
1. **Route Guards:** Gebruik voor beveiligde routes:
```javascript
router.beforeEach((to, from, next) => {
if (to.name === 'Checkout' && !store.state.user) {
next('/login')
} else {
next()
}
})
```
2. **State Persistente:** Gebruik `vuex-persistedstate` voor persistentie
3. **API Integration:** Gebruik actions voor async operaties
4. **Modules:** Split de store in modules voor betere organiseerbaarheid
```bash
npm install vuex-persistedstate
```
Dit geeft je een solide basis voor jouw webshop. Succes met je project!