fetch real data

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "es6-promise": "^3.2.1",
     "express": "^4.14.0",
+    "firebase": "^2.4.2",
     "lru-cache": "^4.0.1",
     "serialize-javascript": "^1.3.0",
     "serve-favicon": "^2.3.0",

src/App.vue

 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <h1>{{ msg }}</h1>
-    <p>Store state:</p>
-    <pre>{{ JSON.stringify($store.state, null, 2) }}</pre>
     <ul>
       <li><router-link to="/">News</router-link></li>
       <li><router-link to="/about">About</router-link></li>
@@ -14,16 +10,6 @@
   </div>
 </template>
 
-<script>
-export default {
-  data () {
-    return {
-      msg: 'Hello Vue 2.0!'
-    }
-  }
-}
-</script>
-
 <style>
 body {
   font-family: Helvetica, sans-serif;

src/server-entry.js

@@ -4,14 +4,13 @@ export default context => {
   // set router's initial location
   router.setInitialLocation(context.url)
   // resolve store state
-  return Promise.all(router.history.current.matched.map(m => {
-    return Promise.all(Object.keys(m.components).map(key => {
-      const component = m.components[key]
-      if (component.prefetch) {
-        return component.prefetch(store)
-      }
-    }))
+  var s = Date.now()
+  return Promise.all(router.getMatchedComponents().map(component => {
+    if (component.prefetch) {
+      return component.prefetch(store)
+    }
   })).then(() => {
+    console.log('data fetch: ' + (Date.now() - s))
     context.initialState = store.state
     return app
   })

src/store/api.js

-export function fetchItems (ids) {
-  return new Promise(resolve => {
-    resolve([{ id: 1, title: 'foo' }, { id: 2, title: 'bar' }])
+import Firebase from 'firebase'
+
+const api = new Firebase('https://hacker-news.firebaseio.com/v0')
+
+function fetch (child) {
+  return new Promise((resolve, reject) => {
+    api.child(child).once('value', snapshot => {
+      resolve(snapshot.val())
+    }, reject)
+  })
+}
+
+export function fetchTopIds () {
+  return fetch(`topstories`)
+}
+
+export function watchTopIds (cb) {
+  api.child(`topstories`).on('value', snapshot => {
+    cb(snapshot.val())
   })
 }
+
+export function fetchItem (id) {
+  return fetch(`item/${id}`)
+}
+
+export function fetchItems (ids) {
+  return Promise.all(ids.map(id => fetchItem(id)))
+}

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
-import { fetchItems } from './api'
+import { watchTopIds, fetchTopIds, fetchItems } from './api'
 
 Vue.use(Vuex)
 
-// pre-fetched state injected by SSR
-const serverState = typeof window !== 'undefined' && window.__INITIAL_STATE__
+const inBrowser = typeof window !== 'undefined'
 
-// default state
-const defaultState = {
+// if in browser, use pre-fetched state injected by SSR
+const state = (inBrowser && window.__INITIAL_STATE__) || {
   storiesPerPage: 30,
   topStoryIds: [],
   items: {}
 }
 
-export default new Vuex.Store({
-  state: serverState || defaultState,
-  mutations: {
-    RECEIVE_ITEMS: (state, { items }) => {
-      for (const id in items) {
-        Vue.set(state.items, id, items[id])
-      }
-    }
-  },
+const store = new Vuex.Store({
+  state,
+
   actions: {
-    FETCH_NEWS_BY_PAGE: ({ commit, state }, { page }) => {
-      const { storiesPerPage, topStoryIds } = state
-      const start = (page - 1) * storiesPerPage
-      const end = page * storiesPerPage
-      const ids = topStoryIds.slice(start, end)
+    FETCH_TOP_IDS: ({ commit }) => {
+      return fetchTopIds().then(ids => {
+        commit('RECEIVE_TOP_IDS', { ids })
+      })
+    },
+    FETCH_NEWS: ({ commit, state }) => {
+      const ids = getDisplayedIds(state).filter(id => !state.items.id)
       return fetchItems(ids).then(items => {
         commit('RECEIVE_ITEMS', { items })
       })
     }
+  },
+
+  mutations: {
+    RECEIVE_TOP_IDS: (state, { ids }) => {
+      state.topStoryIds = ids
+    },
+    RECEIVE_ITEMS: (state, { items }) => {
+      items.forEach(item => {
+        Vue.set(state.items, item.id, item)
+      })
+    }
+  },
+
+  getters: {
+    news: state => {
+      const ids = getDisplayedIds(state)
+      return ids.map(id => state.items[id]).filter(_ => _)
+    }
   }
 })
+
+if (inBrowser) {
+  watchTopIds(ids => {
+    store.commit('RECEIVE_TOP_IDS', { ids })
+  })
+}
+
+function getDisplayedIds (state) {
+  const page = state.route.params.page || 1
+  const { storiesPerPage, topStoryIds } = state
+  const start = (page - 1) * storiesPerPage
+  const end = page * storiesPerPage
+  return topStoryIds.slice(start, end)
+}
+
+export default store

src/views/News.vue

 <template>
   <div>
     <h2>News</h2>
-    <p>hihihi</p>
+    <ul>
+      <li v-for="item in news" :key="item.id">
+        {{ item.title }}
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
+const fetchData = store => {
+  return store
+    .dispatch(`FETCH_TOP_IDS`)
+    .then(() => store.dispatch(`FETCH_NEWS`))
+}
+
 export default {
   name: 'news',
-  prefetch (store) {
-    const page = store.state.route.params.page
-    return store.dispatch('FETCH_NEWS_BY_PAGE', page)
+  prefetch: fetchData,
+  mounted () {
+    fetchData(this.$store)
+  },
+  computed: {
+    news () {
+      return this.$store.getters.news
+    }
   }
 }
 </script>

webpack.server.config.js

@@ -9,6 +9,9 @@ module.exports = merge(webpackConfig, {
     filename: 'server-bundle.js',
     libraryTarget: 'commonjs2'
   },
+  externals: {
+    firebase: true
+  },
   plugins: [
     new webpack.DefinePlugin({
       'process.env': {