Clean architecture with vue, shopping cart demo
yarn serve
yarn build
yarn test:unit
This is an example of implementation of Clean Architecture in Vue
It has major of 4 layers:
inversify
container
.bind<CartRepository>("CartRepository")
.to(CartRepositoryImpl)
.inSingletonScope();
Usage
constructor(
@inject("CartRepository") private cartRepository: CartRepository
) {}
vuetify
Material design ui library
vuex-module-decorators
Access vuex
store in a type-safety way
Instead of writing as
this.$store.dispatch('cart/addProductToCart', {product: this.product, quantity: 1})
We write
const cartStore = getModule(CartStore, this.$store)
cartStore.addProductToCart({product: this.product, quantity: 1})
Author: thanhchungbtc
Live Demo: https://thanhchungbtc.github.io/vue-shopping
GitHub: https://github.com/thanhchungbtc/vue-shopping-clean-architecture
#vuejs #javascript #vue-js