Use vuex instead of component data

Author: Alan Smith

src/components/App/App.js

@@ -1,6 +1,6 @@
 import EventList from '@sections/EventList/EventList.vue';
 import AddEvent from '@modals/AddEvent/AddEvent.vue';
-import { get, set } from '@/utils/storage';
+import { get } from '@/utils/storage';
 
 export default {
   name: 'App',
@@ -10,35 +10,29 @@ export default {
     AddEvent,
   },
 
-  data() {
-    return {
-      events: [],
-    };
-  },
-
   methods: {
-    onAddEvent(event) {
-      this.events.push(event);
-      set('events', this.events);
-    },
-
     openAddEvent() {
       this.$refs.addEvent.open();
     },
-
-    onRemoveEvent(eventId) {
-      const index = this.events.findIndex(event => event.eventId === eventId);
-      this.events.splice(index, 1);
-      set('events', this.events);
-    },
   },
 
   created() {
     const events = get('events') || [];
 
     events.forEach((event) => {
       event.eventDate = new Date(event.eventDate);
-      this.events.push(event);
     });
+
+    this.$store.dispatch('setEvents', events);
+
+    this.$store.subscribe((mutation) => {
+      if (['ADD_EVENT', 'REMOVE_EVENT'].includes(mutation.type)) {
+        this.$store.dispatch('syncEvents');
+      }
+    });
+  },
+
+  destroyed() {
+
   },
 };

src/components/App/App.vue

@@ -1,14 +1,10 @@
 <template>
   <div class="c-app">
-    <event-list
-      :events="events"
-      @remove-event="onRemoveEvent"/>
+    <event-list/>
     <div
       class="c-app__add-event-button"
       @click="openAddEvent">Add Event</div>
-    <add-event
-      ref="addEvent"
-      @add="onAddEvent"/>
+    <add-event ref="addEvent"/>
   </div>
 </template>
 <script src="./App.js"></script>

src/components/modals/AddEvent/AddEvent.js

@@ -44,7 +44,7 @@ export default {
       const date = new Date(this.eventDate);
       const eventId = this.generateEventId();
 
-      this.$emit('add', {
+      this.$store.dispatch('addEvent', {
         eventId,
         eventName: this.eventName,
         eventDate: date,

src/components/sections/Event/Event.js

@@ -73,7 +73,7 @@ export default {
     },
 
     onClickRemove() {
-      this.$emit('remove-event', this.eventId);
+      this.$store.dispatch('removeEvent', this.eventId);
     },
   },
 };

src/components/sections/EventList/EventList.js

@@ -3,17 +3,16 @@ import Event from '@sections/Event/Event.vue';
 export default {
   name: 'EventList',
 
-  props: {
-    events: {
-      type: Array,
-      required: true,
-    },
-  },
-
   components: {
     Event,
   },
 
+  computed: {
+    events() {
+      return this.$store.state.events;
+    },
+  },
+
   methods: {
     onRemoveEvent(id) {
       this.$emit('remove-event', id);

src/components/sections/EventList/EventList.vue

@@ -6,8 +6,7 @@
       :event-id="event.eventId"
       :event-name="event.eventName"
       :event-date="event.eventDate"
-      :background="event.background"
-      @remove-event="onRemoveEvent"/>
+      :background="event.background"/>
   </div>
 </template>
 <script src="./EventList.js"></script>

src/store.js

@@ -1,16 +1,40 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
+import { set } from '@/utils/storage';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
   state: {
-
+    events: [],
   },
+
   mutations: {
+    ADD_EVENT(state, event) {
+      state.events.push(event);
+    },
 
+    REMOVE_EVENT(state, eventId) {
+      const index = state.events.findIndex(event => event.eventId === eventId);
+      state.events.splice(index, 1);
+    },
   },
+
   actions: {
+    setEvents({ commit }, events) {
+      events.forEach(event => commit('ADD_EVENT', event));
+    },
+
+    addEvent({ commit }, event) {
+      commit('ADD_EVENT', event);
+    },
+
+    removeEvent({ commit }, eventId) {
+      commit('REMOVE_EVENT', eventId);
+    },
 
+    syncEvents({ state }) {
+      set('events', state.events);
+    },
   },
 });