From 88c3bed379371ee1d74fdc1e9c10c059bb39a071 Mon Sep 17 00:00:00 2001 From: Declan de Wet Date: Tue, 8 Nov 2016 11:05:34 +0200 Subject: [PATCH] add vuex example --- examples/index.html | 1 + examples/vuex/app.js | 108 +++++++++++++++++++++++++++++++++++++++ examples/vuex/index.html | 5 ++ package.json | 1 + yarn.lock | 4 ++ 5 files changed, 119 insertions(+) create mode 100644 examples/vuex/app.js create mode 100644 examples/vuex/index.html diff --git a/examples/index.html b/examples/index.html index 2e47851..fb6e04b 100644 --- a/examples/index.html +++ b/examples/index.html @@ -10,6 +10,7 @@
  • Basic
  • Basic Render
  • Usage with vue-router
    • +
  • Usage with vuex
    • diff --git a/examples/vuex/app.js b/examples/vuex/app.js new file mode 100644 index 0000000..4fc83f3 --- /dev/null +++ b/examples/vuex/app.js @@ -0,0 +1,108 @@ +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

    +
    + ` +} + +const app = new Vue(Object.assign(App, { router, store })) + +app.$mount('#app') diff --git a/examples/vuex/index.html b/examples/vuex/index.html new file mode 100644 index 0000000..3eed645 --- /dev/null +++ b/examples/vuex/index.html @@ -0,0 +1,5 @@ + + +← Examples index +
    + diff --git a/package.json b/package.json index 4ecb9c2..1fab328 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "vue": "^2.0.3", "vue-loader": "^9.7.0", "vue-router": "^2.0.1", + "vuex": "^2.0.0", "webpack": "beta", "webpack-dev-server": "beta" }, diff --git a/yarn.lock b/yarn.lock index 0c8e963..f37c52f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5390,6 +5390,10 @@ vue@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/vue/-/vue-2.0.3.tgz#3f7698f83d6ad1f0e35955447901672876c63fde" +vuex: + version "2.0.0" + resolved "https://registry.yarnpkg.com/vuex/-/vuex-2.0.0.tgz#26befa44de220f009e432d1027487bff29571cee" + ware@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/ware/-/ware-1.3.0.tgz#d1b14f39d2e2cb4ab8c4098f756fe4b164e473d4"