Vuex: counter page

Author: Laoujin

Exercises.md

@@ -0,0 +1,35 @@
+Exercises
+=========
+
+Remove from cart
+----------------
+Add a button to remove socks from the Cart.
+- Disable the button when the color is not present in the cart.
+
+
+Inventory per color
+-------------------
+Keep track of inventory per color.
+- Add to cart should only be enabled when there are socks in that color left in the inventory.
+
+
+Reviews
+-------
+- Add validation: name is required
+- Add validation: Must accept the terms
+- Display all reviews already submitted
+
+
+New page: Cart contents
+-----------------------
+Add a new router link `/cart` and... display the cart contents.
+- Create a new `CartProduct` component to display the information. (with an image?)
+- Add a product price.
+- Allow to order more/less of a product in the Cart
+- Calculate the total Cart cost. (with shipping costs?)
+
+
+Vuex
+----
+- Put the `Product.vue` product properties in the store.
+- On the main page, loop over the products and display them.

Vuex-Flow.png

@@ -5,7 +5,7 @@
 
       <div class="links">
         <router-link to="/">Home</router-link> |
-        <router-link to="/about">About</router-link>
+        <router-link to="/counter" title="Vuex example">Counter</router-link>
       </div>
     </div>
 

cli-socks/src/App.vue

@@ -14,13 +14,13 @@ export default new Router({
       component: Home
     },
     {
-      path: "/about",
-      name: "about",
+      path: "/counter",
+      name: "Vuex Counter",
       // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
+      // this generates a separate chunk (counter.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () =>
-        import(/* webpackChunkName: "about" */ "./views/About.vue")
+        import(/* webpackChunkName: "counter" */ "./views/Counter.vue")
     }
   ]
 });

cli-socks/src/router.ts

@@ -4,7 +4,24 @@ import Vuex from "vuex";
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {},
-  mutations: {},
-  actions: {}
+  // ~ component.data
+  state: {
+    count: 0
+  },
+
+  // ~ component.methods
+  actions: {},
+
+  // ~ component.computed
+  getters: {},
+
+  // ~ redux.actions
+  mutations: {
+    increment(state) {
+      state.count++;
+    },
+    decrement(state) {
+      state.count--;
+    }
+  },
 });

cli-socks/src/store.ts

@@ -0,0 +1,37 @@
+<template>
+  <div class="counter">
+    <h1>Vuex Counter</h1>
+    <p>{{ count }}</p>
+    <p>
+      <button @click="increment">+</button>
+      <button @click="decrement">-</button>
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+import { mapState, mapGetters } from 'vuex';
+
+@Component
+export default class Counter extends Vue {
+  get count(): number {
+    return this.$store.state.count;
+  }
+
+  increment(): void {
+    this.$store.commit('increment');
+  }
+
+  decrement(): void {
+    this.$store.commit('decrement');
+  }
+}
+</script>
+
+
+<style scoped lang="scss">
+.counter {
+  padding-left: 25px;
+}
+</style>