Simple E-Commerce Cart using Vuex

README.md

Simple E-Commerce Cart using Vuex

A very simple exploration on building e-commerce cart functionality using Vuex, the Vue state manager. To try this out, open the example from Vuex getting started page on the basic counter example. Then, copy all the html, js, and css code.

vuex-commerce.css

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*, *:focus, *:hover {
  outline:none;
}

* {
  font-family: 'Roboto', sans-serif;
  padding:0;
  margin:0;
  box-sizing:border-box;
}

.header {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  background-color:#e4d3cf;
  height:30px;
}

.header-items {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  height:100%;
  background-color:#b67162;
  padding:0 5px;
  font-weight:bold;
  color:#151515;
}

.header-text {
  margin-right:5px;
}

.header-count {
  width:15px;
  text-align:center;
}

.header button {
  background-color:#ffab73;
  border:none;
  height:100%;
  padding:0 5px;
  font-weight:bold;
}

.header button:hover,
.header button:active {
  cursor:pointer;
  background-color:#ef8d32;
}

.product-lists {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  padding:30px;
  background-color:#eee;
  height:85vh;
}

.product-item {
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  padding:10px;
  margin:20px;
  width:100px;
  height:120px;
  border-radius:5px;
  background-color:#e4d3cf;
}

.product-item button {
  background-color:#b67162;
  font-weight:bold;
  color:#151515;
  border:none;
  padding:7px;
  border-radius:5px;
  font-size:10px;
}

.product-item button:hover, 
.product-item button:active {
  cursor:pointer;
  background-color:#e9896a;
}

vuex-commerce.html

<div id="app">
  <header class="header">
    <div class="header-items">
      <p class="header-text">Cart: </p>
      <div class="header-count">{{count}}</div>
    </div>
    <button @click="emptying">Remove All Items</button>
  </header>
  
  <section class="product-lists">
    <div class="product-item">
      <button @click="increment">Add to Cart</button>
    </div>
    <div class="product-item">
      <button @click="increment">Add to Cart</button>
    </div>
    <div class="product-item">
      <button @click="increment">Add to Cart</button>
    </div>
  </section>
</div>

vuex-commerce.js

// make sure to call Vue.use(Vuex) if using a module system

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  	increment: state => state.count++,
    decrement: state => state.count--,
    reset: state=>state.count = 0,
  }
})

new Vue({
  el: '#app',
  computed: {
    count () {
	    return store.state.count
    }
  },
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
    	if(store.state.count > 0) {
      	store.commit('decrement')
			}
    }, 
    emptying() {
    	store.commit('reset')
		}
  }
})