Finished Tutorial

src/components/HelloWorld.vue

@@ -2,24 +2,50 @@
   <div class="hello">
     <div class="left">
       <h1>{{ title }}</h1>
+      <form @submit.prevent="addLink">
+        <input class="link-input" type="text" placeholder="Add a link" v-model="newLink">
+      </form>
       <ul>
         <li v-for="(link, index) in links" v-bind:key="index">
           {{ link }}
+          <button v-on:click="removeLinks(index)" class="rm">Remove</button>
         </li>
       </ul>
     </div>
     <div class="right">
-      <stats></stats>
+      <stats />
     </div>
   </div>
 </template>
 
 <script>
 import Stats from '@/components/Stats.vue'
-import { mapState } from 'vuex'
+import { mapState, mapMutations, mapActions } from 'vuex'
 
 export default {
   name: 'HelloWorld',
+  data() {
+    return {
+      newLink:''
+    }
+  },
+  methods:  {
+    ...mapMutations([
+      'ADD_LINK'
+    ]),
+    ...mapActions([
+      'removeLink'
+    ]),
+    // this way we are wiring up our mutator through the addLink method of the component
+    addLink() {
+      this.ADD_LINK(this.newLink)
+      this.newLink = ''
+    },
+    removeLinks(link) {
+      this.removeLink(link)
+    },
+
+  },
   components:{
     Stats
   },
@@ -73,4 +99,24 @@ export default {
     background-color: #E9E9E9;
   }
 
+  input {
+    border: none;
+    padding: 20px;
+    width: calc(100% - 40px);
+    box-shadow: 0 5px 5px lightgrey;
+    margin-bottom: 50px;
+    outline: none;
+  }
+
+  .rm {
+    float: right;
+    text-transform: uppercase;
+    font-size: .8em;
+    background: #f9d0e3;
+    border: none;
+    padding: 5px;
+    color: #ff0076;
+    cursor: pointer;
+  }
+
 </style>

src/components/Stats.vue

@@ -2,20 +2,36 @@
   <div class="stats">
     <h1>A different component</h1>
     <p>There are currently {{ countLinks }} links</p>
+    <button  v-on:click="removeAllLinks">Remove all links</button>
+    <p>{{ msg }}</p>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapMutations, mapActions } from 'vuex'
 
 export default {
   name: 'Stats',
+  data() {
+    return {
+      msg: ''
+    }
+  },
   computed: {
     ...mapGetters([
       'countLinks'
     ]),
     // Other stuff
   },
+  methods: {
+    ...mapMutations(['REMOVE_ALL']),
+    ...mapActions(['removeAll']),
+    removeAllLinks() {
+      this.removeAll().then(() => {
+        this.msg = 'They have been removed'
+      })
+    }
+  }
 }
 </script>
 
@@ -36,4 +52,15 @@ li {
 a {
   color: #42b983;
 }
+
+button {
+  padding: 10px;
+  margin-top: 30px;
+  width: 100%;
+  background: none;
+  border: 1px solid lightgrey;
+  outline: 0;
+  cursor: pointer;
+}
+
 </style>

src/store.js

@@ -15,10 +15,35 @@ export default new Vuex.Store({
   getters: {
     countLinks: state => { return state.links.length }
   },
+  // Used when we want to change state data
+  // Should be used for synchronous functions
   mutations: {
-
+    // By convention mutators are all caps
+    ADD_LINK: (state, link) => {
+      state.links.push(link)
+    },
+    REMOVE_LINK: (state, link) => {
+      state.links.splice(link, 1)
+    },
+    REMOVE_ALL: (state) => {
+      state.links = []
+    }
   },
+  // Actions are for async functions
   actions: {
-
+    // the context provides you the same methods and instances as the store instance, and then we pass in a payload
+    // Here we are using actions to asynchronously call a mutation function
+    removeLink(context, link) {
+      context.commit("REMOVE_LINK", link)
+    },
+    // Pretty sure we are just using object destructuring here
+    removeAll({commit}) {
+      return new Promise((resolve, reject) => {
+        setTimeout(()=> {
+          commit('REMOVE_ALL')
+          resolve()
+        }, 1500) // 1.5 seconds
+      })
+    }
   }
 })

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <HelloWorld />
   </div>
 </template>