NameSpace Event

src/store/modules/event.js

@@ -1,5 +1,7 @@
 import EventService from '@/services/EventService.js'
 
+export const namespaced = true
+
 export const state = {
   events: [],
   eventsTotal: 0,

src/views/EventCreate.vue

@@ -65,7 +65,7 @@ export default {
   methods: {
     createEvent() {
       this.$store
-        .dispatch('createEvent', this.event)
+        .dispatch('event/createEvent', this.event)
         .then(() => {
           this.$router.push({
             name: 'event-show',

src/views/EventList.vue

@@ -24,7 +24,7 @@ export default {
     this.perPage = 3 // Setting perPage here and not in data means it won't be reactive.
     // We don't need it to be reactive, and this way our component has access to it.
 
-    this.$store.dispatch('fetchEvents', {
+    this.$store.dispatch('event/fetchEvents', {
       perPage: this.perPage,
       page: this.page
     })

src/views/EventShow.vue

@@ -25,16 +25,17 @@
   </div>
 </template>
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   props: ['id'],
   created() {
-    this.$store.dispatch('fetchEvent', this.id)
+    this.fetchEvent(this.id)
   },
   computed: mapState({
     event: state => state.event.event
-  })
+  }),
+  methods: mapActions('event', ['fetchEvent'])
 }
 </script>
 <style scoped>