basic item/user prefetch

src/store/api.js

@@ -72,6 +72,10 @@ export function fetchItems (ids) {
   return Promise.all(ids.map(id => fetchItem(id)))
 }
 
+export function fetchUser (id) {
+  return fetch(`user/${id}`)
+}
+
 export function watchList (type, cb) {
   let first = true
   const ref = api.child(`${type}stories`)

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
-import { fetchIdsByType, fetchItem, fetchItems } from './api'
+import { fetchItem, fetchItems, fetchIdsByType, fetchUser } from './api'
 
 Vue.use(Vuex)
 
@@ -8,12 +8,10 @@ const store = new Vuex.Store({
   state: {
     activeType: null,
     itemsPerPage: 20,
-    // fetched items by id. This also serves as a cache to some extent
     items: {/* [id: number]: Item */},
-    // the id lists for each type of stories
-    // will be periodically updated in realtime
+    users: {/* [id: string]: User */},
     lists: {
-      top: [],
+      top: [/* number */],
       new: [],
       show: [],
       ask: [],
@@ -45,6 +43,12 @@ const store = new Vuex.Store({
       } else {
         return Promise.resolve()
       }
+    },
+
+    FETCH_USER: ({ commit, state }, { id }) => {
+      return state.users[id]
+        ? Promise.resolve(state.users[id])
+        : fetchUser(id).then(user => commit('SET_USER', { user }))
     }
   },
 
@@ -63,6 +67,10 @@ const store = new Vuex.Store({
           Vue.set(state.items, item.id, item)
         }
       })
+    },
+
+    SET_USER: (state, { user }) => {
+      Vue.set(state.users, user.id, user)
     }
   },
 

src/views/ItemView.vue

@@ -6,6 +6,12 @@
 </template>
 
 <script>
+function fetchItem (store) {
+  return store.dispatch('FETCH_ITEMS', {
+    ids: [store.state.route.params.id]
+  })
+}
+
 export default {
   name: 'item-view',
   computed: {
@@ -13,10 +19,9 @@ export default {
       return this.$store.state.items[this.$route.params.id]
     }
   },
+  preFetch: fetchItem,
   beforeMount () {
-    this.$store.dispatch('FETCH_ITEMS', {
-      ids: [this.$route.params.id]
-    })
+    fetchItem(this.$store)
   }
 }
 </script>

src/views/UserView.vue

 <template>
   <div class="user-view">
-    <h2>User!</h2>
+    <h2 v-if="user">User: {{ user.id }}</h2>
   </div>
 </template>
 
 <script>
-export default {
-  name: 'user-view',
-
-  preFetch (store) {
+function fetchUser (store) {
   return store.dispatch('FETCH_USER', {
     id: store.state.route.params.id
   })
-  },
-
-  mounted () {
+}
 
+export default {
+  name: 'user-view',
+  computed: {
+    user () {
+      return this.$store.state.users[this.$route.params.id]
+    }
+  },
+  preFetch: fetchUser,
+  beforeMount () {
+    fetchUser(this.$store)
   }
 }
 </script>