diff --git a/examples/vuex/App.vue b/examples/vuex/App.vue
new file mode 100644
index 0000000..0ff3c68
--- /dev/null
+++ b/examples/vuex/App.vue
@@ -0,0 +1,7 @@
+
+
+
vuex
+
+
Inspect Element to see the meta info
+
+
diff --git a/examples/vuex/app.js b/examples/vuex/app.js
index 4fc83f3..62b4434 100644
--- a/examples/vuex/app.js
+++ b/examples/vuex/app.js
@@ -1,107 +1,7 @@
import Vue from 'vue'
-import VueMeta from 'vue-meta'
-import Vuex from 'vuex'
-import Router from 'vue-router'
-
-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: `
-
-
This is the homepage
-
There are {{ postsCount }} published posts
-
-
- `,
- computed: {
- posts () {
- return this.$store.getters.publishedPosts
- },
- postsCount () {
- return this.$store.getters.publishedPostsCount
- }
- },
- metaInfo: {
- title: 'Home'
- }
-}
-
-const BlogPost = {
- name: `blog-post`,
- template: `
-
-
{{ post.title }}
-
{{ post.content}}
- Go back home
-
- `,
- 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: `
-
-
vuex
-
-
Inspect Element to see the meta info
-
- `
-}
+import store from './store'
+import router from './router'
+import App from './App.vue'
const app = new Vue(Object.assign(App, { router, store }))
diff --git a/examples/vuex/router.js b/examples/vuex/router.js
new file mode 100644
index 0000000..677b408
--- /dev/null
+++ b/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 }
+ ]
+})
diff --git a/examples/vuex/store.js b/examples/vuex/store.js
new file mode 100644
index 0000000..3796565
--- /dev/null
+++ b/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)
+ }
+ }
+})
diff --git a/examples/vuex/views/Home.vue b/examples/vuex/views/Home.vue
new file mode 100644
index 0000000..b97fdf7
--- /dev/null
+++ b/examples/vuex/views/Home.vue
@@ -0,0 +1,26 @@
+
+
+
This is the homepage
+
There are {{ postsCount }} published posts
+
+
+
+
+
diff --git a/examples/vuex/views/Post.vue b/examples/vuex/views/Post.vue
new file mode 100644
index 0000000..0c6f47c
--- /dev/null
+++ b/examples/vuex/views/Post.vue
@@ -0,0 +1,27 @@
+
+
+
{{ post.title }}
+
{{ post.content}}
+ Go back home
+
+
+
+