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 @@ + 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 @@ + + + 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 @@ + + +