├── .gitignore ├── .babelrc ├── src ├── main.js ├── components │ ├── Navbar.vue │ ├── Products.vue │ ├── SingleProduct.vue │ ├── Toast.vue │ └── Cart.vue ├── myapi.js ├── products.js ├── App.vue └── store │ └── store.js ├── README.md ├── docs ├── index.html └── build.js ├── index.html ├── package.json └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["es2015", { "modules": false }], 4 | ["stage-2"] 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import { store } from './store/store' 4 | 5 | 6 | new Vue({ 7 | el: '#app', 8 | store, 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## A simple vuex based shopping cart example 2 | 3 | Checkout the working demo [here](https://rvamsikrishna.github.io/vuex-shopping-cart/) 4 | 5 | ``` 6 | # clone the project 7 | git clone https://rvamsikrishna.github.io/vuex-shopping-cart/ vuex-shopping-cart 8 | 9 | # change directory 10 | cd vuex-shopping-cart 11 | 12 | # install dependencies 13 | npm install 14 | 15 | # start the dev server 16 | npm run dev 17 | 18 | ``` 19 | -------------------------------------------------------------------------------- /src/components/Navbar.vue: -------------------------------------------------------------------------------- 1 | 2 | 13 | -------------------------------------------------------------------------------- /src/myapi.js: -------------------------------------------------------------------------------- 1 | import products from './products.js' 2 | 3 | export default { 4 | getProducts: () => { 5 | return new Promise((resolve, reject) => { 6 | setTimeout(() => { 7 | resolve(products); 8 | }, 500); 9 | }); 10 | }, 11 | products: (action, productId) => { 12 | return new Promise((resolve, reject) => { 13 | setTimeout(() => { 14 | resolve(productId); 15 | }, 100); 16 | }); 17 | } 18 | } -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 |Price: ${{product.price}}
6 | 13 || # | 11 |Product | 12 |Price | 13 |Quantity | 14 |Delete | 15 |Total | 16 |
|---|---|---|---|---|---|
| {{index + 1}} | 21 |{{product.name}} | 22 |$ {{product.price}} | 23 |24 | 30 | {{product.quantity}} 31 | 37 | | 38 |43 | | $ {{product.quantity* product.price}} | 44 |
| Total: | 48 |$ {{cartTotalAmount}} | 49 |||||