Skip to content

N
node-sample
Commit 5a123910 authored by Evan You's avatar Evan You
Browse files
Options

tweak transition logic

parent 0f936915
Hide whitespace changes
Inline Side-by-side
Showing with 17 additions and 27 deletions
build/webpack.server.config.js
View file @ 5a123910
...@@ -9,10 +9,7 @@ module.exports = Object.assign({}, base, { ...@@ -9,10 +9,7 @@ module.exports = Object.assign({}, base, {
filename: 'server-bundle.js', filename: 'server-bundle.js',
libraryTarget: 'commonjs2' libraryTarget: 'commonjs2'
}), }),
externals: { externals: ['firebase', 'lru-cache', 'es6-promise'],
firebase: true,
'lru-cache': true
},
plugins: [ plugins: [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'), 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
......
index.html deleted 100644 → 0
View file @ 0f936915
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-hackernews-2.0</title>
</head>
<body>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>
</html>
server.js
View file @ 5a123910
...@@ -67,6 +67,7 @@ app.get('*', (req, res) => { ...@@ -67,6 +67,7 @@ app.get('*', (req, res) => {
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>vue-hackernews-2.0</title> <title>vue-hackernews-2.0</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
${process.env.NODE_ENV === 'production' ${process.env.NODE_ENV === 'production'
? `<link rel="stylesheet" href="/dist/styles.css">` ? `<link rel="stylesheet" href="/dist/styles.css">`
: ``} : ``}
......
src/store/index.js
View file @ 5a123910
...@@ -53,6 +53,7 @@ const store = new Vuex.Store({ ...@@ -53,6 +53,7 @@ const store = new Vuex.Store({
if (inBrowser) { if (inBrowser) {
watchTopIds(ids => { watchTopIds(ids => {
store.commit('RECEIVE_TOP_IDS', { ids }) store.commit('RECEIVE_TOP_IDS', { ids })
store.dispatch('FETCH_NEWS')
}) })
} }
......
src/views/News.vue
View file @ 5a123910
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
</li> </li>
</ul> </ul>
<transition :name="transition"> <transition :name="transition">
<div class="news-list" v-if="!loading" :key="$route.params.page"> <div class="news-list" :key="displayPage">
<transition-group tag="ul" name="item"> <transition-group tag="ul" name="item">
<news-item v-for="item in news" :key="item.id" :item="item"> <news-item v-for="item in displayItems" :key="item.id" :item="item">
</news-item> </news-item>
</transition-group> </transition-group>
</div> </div>
...@@ -41,13 +41,13 @@ export default { ...@@ -41,13 +41,13 @@ export default {
}, },
data () { data () {
return { return {
loading: false,
displayPage: this.$route.params.page,
displayItems: this.$store.getters.news,
transition: 'slide-left' transition: 'slide-left'
} }
}, },
computed: { computed: {
news () {
return this.$store.getters.news
},
page () { page () {
return Number(this.$route.params.page) return Number(this.$route.params.page)
}, },
...@@ -57,9 +57,6 @@ export default { ...@@ -57,9 +57,6 @@ export default {
}, },
hasMore () { hasMore () {
return this.page < this.maxPage return this.page < this.maxPage
},
loading () {
return this.news.length < this.$store.state.storiesPerPage
} }
}, },
mounted () { mounted () {
...@@ -70,10 +67,15 @@ export default { ...@@ -70,10 +67,15 @@ export default {
}, },
watch: { watch: {
'$route' (to, from) { '$route' (to, from) {
this.$store.dispatch(`FETCH_NEWS`) this.loading = true
this.transition = Number(to.params.page) > Number(from.params.page) this.$store.dispatch(`FETCH_NEWS`).then(() => {
? 'slide-left' const toPage = Number(to.params.page)
: 'slide-right' const fromPage = Number(from.params.page)
this.transition = toPage > fromPage ? 'slide-left' : 'slide-right'
this.displayPage = toPage
this.displayItems = this.$store.getters.news.slice()
this.loading = false
})
} }
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment