mirrors/vue-meta
2
0
Fork 0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-25 11:30:34 +03:00
Code Activity

add vuex example

Browse Source
This commit is contained in:
Declan de Wet
2016-11-08 11:05:34 +02:00
parent a51edf5ea2
commit 88c3bed379
5 changed files with 119 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/index.html
+1
View File
@@ -10,6 +10,7 @@
<li><a href="basic">Basic</a></li> <li><a href="basic">Basic</a></li>
<li><a href="basic-render">Basic Render</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="vue-router">Usage with vue-router</a></li>
<li><a href="vuex">Usage with vuex</a></li>
</ul> </ul>
</body> </body>
</html> </html>
examples/vuex/app.js
+108
View File
@@ -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')
examples/vuex/index.html
+5
View File
@@ -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>
package.json
+1
View File
@@ -47,6 +47,7 @@
"vue": "^2.0.3", "vue": "^2.0.3",
"vue-loader": "^9.7.0", "vue-loader": "^9.7.0",
"vue-router": "^2.0.1", "vue-router": "^2.0.1",
"vuex": "^2.0.0",
"webpack": "beta", "webpack": "beta",
"webpack-dev-server": "beta" "webpack-dev-server": "beta"
}, },
yarn.lock
+4
View File
@@ -5390,6 +5390,10 @@ vue@^2.0.3:
version "2.0.3" version "2.0.3"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.0.3.tgz#3f7698f83d6ad1f0e35955447901672876c63fde" 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: ware@^1.3.0:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/ware/-/ware-1.3.0.tgz#d1b14f39d2e2cb4ab8c4098f756fe4b164e473d4" resolved "https://registry.yarnpkg.com/ware/-/ware-1.3.0.tgz#d1b14f39d2e2cb4ab8c4098f756fe4b164e473d4"