Fetch blogs > fetch store.dispatch state+actions+mutations

pages/blogs.vue

@@ -60,6 +60,9 @@
 </template>
 <script>
 export default {
+  async fetch({store}) {
+    await store.dispatch('blog/fetchBlogs')
+  }
 }
 </script>
 <style scoped>

pages/instructor/blogs/index.vue

@@ -32,7 +32,7 @@
                   v-for="dBlog in drafts"
                   :key="dBlog._id"
                   class="blog-card">
-                  <h2>{{dBlog.title}}</h2>
+                  <h2>{{displayBlogTitle(dBlog)}}</h2>
                   <div class="blog-card-footer">
                     <span>
                       Last Edited {{dBlog.updatedAt | formatDate('LLLL')}}
@@ -55,7 +55,7 @@
                   v-for="pBlog in published"
                   :key="pBlog._id"
                   class="blog-card">
-                  <h2>{{pBlog.title}}</h2>
+                  <h2>{{displayBlogTitle(pBlog)}}</h2>
                   <div class="blog-card-footer">
                     <span>
                       Last Edited {{pBlog.updatedAt | formatDate('LLLL')}}
@@ -124,11 +124,14 @@ export default {
           this.$toasted.success('Blog was succesfuly deleted!', {duration: 2000})
         }
       }
+    },
+    displayBlogTitle(blog) {
+      return blog.title || blog.subtitle || 'Blog without title & subtitle :('
     }
   },
   async fetch({store}) {
     await store.dispatch('instructor/blog/fetchUserBlogs')
-  }
+  },
 }
 </script>
 

store/blog.js

@@ -0,0 +1,26 @@
+export const state = () => ({
+  items: {
+    all: [],
+    featured: []
+  }
+})
+
+export const actions = {
+  async fetchBlogs({commit, state}) {
+    const data = await this.$axios.$get('/api/v1/blogs')
+    if(data.isAxiosError === true){
+      console.log(data.data)
+      return Error('')
+    }
+    debugger
+    const { blogs } = data
+    commit('setBlogs', {resource: 'all', blogs})
+    return state.items.all
+  }
+}
+
+export const mutations = {
+  setBlogs(state, {resource, blogs}) {
+    state.items[resource] = blogs
+  }
+}