modularize vuex example

examples/vuex/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <div id="app">
+    <h1>vuex</h1>
+    <router-view></router-view>
+    <p>Inspect Element to see the meta info</p>
+  </div>
+</template>

examples/vuex/app.js

@@ -1,107 +1,7 @@
 import Vue from 'vue'
-import VueMeta from 'vue-meta'
+import store from './store'
-import Vuex from 'vuex'
+import router from './router'
-import Router from 'vue-router'
+import App from './App.vue'
-
-Vue.use(Vuex)
-Vue.use(Router)
-Vue.use(VueMeta)
-
-const store = new Vuex.Store({
-  state: {
-    posts: [{
-      slug: 'a-sample-blog-post',
-      title: 'A Sample Blog Post',
-      content: 'This is the blog post content',
-      published: true
-    }, {
-      slug: 'an-unpublished-blog-post',
-      title: 'An Unpublished Blog Post',
-      content: 'This is the blog post content',
-      published: false
-    }, {
-      slug: 'another-blog-post',
-      title: 'Another Blog Post',
-      content: 'This is the blog post content',
-      published: true
-    }]
-  },
-  getters: {
-    publishedPosts (state) {
-      return state.posts.filter((post) => post.published)
-    },
-    publishedPostsCount (state, getters) {
-      return getters.publishedPosts.length
-    }
-  }
-})
-
-const Home = {
-  name: 'home',
-  template: `
-    <div>
-      <h3>This is the homepage</h3>
-      <h4>There are <u>{{ postsCount }}</u> published posts</h4>
-      <ul>
-        <li v-for="post in posts">
-          <router-link :to="'posts/' + post.slug">{{ post.title }}</router-link>
-        </li>
-      </ul>
-    </div>
-  `,
-  computed: {
-    posts () {
-      return this.$store.getters.publishedPosts
-    },
-    postsCount () {
-      return this.$store.getters.publishedPostsCount
-    }
-  },
-  metaInfo: {
-    title: 'Home'
-  }
-}
-
-const BlogPost = {
-  name: `blog-post`,
-  template: `
-    <div>
-      <h3>{{ post.title }}</h3>
-      <p>{{ post.content}}<p>
-      <router-link to="/">Go back home</router-link>
-    </div>
-  `,
-  computed: {
-    post () {
-      return this.$store.getters.publishedPosts
-        .find((post) => post.slug === this.$route.params.slug)
-    }
-  },
-  metaInfo: {
-    title () {
-      return this.post.title
-    }
-  }
-}
-
-const router = new Router({
-  mode: 'history',
-  base: '/vuex',
-  routes: [
-    { path: '/', component: Home },
-    { path: '/posts/:slug', component: BlogPost }
-  ]
-})
-
-const App = {
-  template: `
-    <div id="app">
-      <h1>vuex</h1>
-      <router-view></router-view>
-      <p>Inspect Element to see the meta info</p>
-    </div>
-  `
-}
 
 const app = new Vue(Object.assign(App, { router, store }))
 

examples/vuex/router.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Meta from 'vue-meta'
+import Home from './views/Home.vue'
+import Post from './views/Post.vue'
+
+Vue.use(Router)
+Vue.use(Meta)
+
+export default new Router({
+  mode: 'history',
+  base: '/vuex',
+  routes: [
+    { path: '/', component: Home },
+    { path: '/posts/:slug', component: Post }
+  ]
+})

examples/vuex/store.js

@@ -0,0 +1,54 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  // STATE
+  state: {
+    post: null,
+    posts: [{
+      slug: 'a-sample-blog-post',
+      title: 'A Sample Blog Post',
+      content: 'This is the blog post content',
+      published: true
+    }, {
+      slug: 'an-unpublished-blog-post',
+      title: 'An Unpublished Blog Post',
+      content: 'This is the blog post content',
+      published: false
+    }, {
+      slug: 'another-blog-post',
+      title: 'Another Blog Post',
+      content: 'This is the blog post content',
+      published: true
+    }]
+  },
+
+  // GETTERS
+  getters: {
+    post (state) {
+      return state.post
+    },
+    publishedPosts (state) {
+      return state.posts.filter((post) => post.published)
+    },
+    publishedPostsCount (state, getters) {
+      return getters.publishedPosts.length
+    }
+  },
+
+  // MUTATIONS
+  mutations: {
+    getPost (state, { slug }) {
+      state.post = state.posts.find((post) => post.slug === slug)
+    }
+  },
+
+  // ACTIONS
+  actions: {
+    getPost ({ commit }, payload) {
+      commit('getPost', payload)
+    }
+  }
+})

examples/vuex/views/Home.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h3>This is the homepage</h3>
+    <h4>There are <u>{{ postsCount }}</u> published posts</h4>
+    <ul>
+      <li v-for="post in posts">
+        <router-link :to="'posts/' + post.slug">{{ post.title }}</router-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'home',
+    computed: mapGetters({
+      posts: 'publishedPosts',
+      postsCount: 'publishedPostsCount'
+    }),
+    metaInfo: {
+      title: 'Home'
+    }
+  }
+</script>

examples/vuex/views/Post.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <h3>{{ post.title }}</h3>
+    <p>{{ post.content}}<p>
+    <router-link to="/">Go back home</router-link>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex'
+
+  export default {
+    name: 'blog-post',
+    beforeMount () {
+      const { slug } = this.$route.params
+      this.$store.dispatch('getPost', { slug })
+    },
+    computed: mapGetters([
+      'post'
+    ]),
+    metaInfo: {
+      title () {
+        return this.post.title
+      }
+    }
+  }
+</script>