add vuex example

2026-06-16 22:20:34 +03:00 · 2016-11-08 11:05:34 +02:00
parent a51edf5ea2
commit 88c3bed379
5 changed files with 119 additions and 0 deletions
@@ -10,6 +10,7 @@
    <li><a href="basic">Basic</a></li>
    <li><a href="basic-render">Basic Render</a></li>
    <li><a href="vue-router">Usage with vue-router</a></li>
+    <li><a href="vuex">Usage with vuex</a></li>
  </ul>
 </body>
 </html>
@@ -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: `
+    <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 }))
+
+app.$mount('#app')
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/vuex.js"></script>
@@ -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"
  },
@@ -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"