basic item/user prefetch

Author: yyx990803

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

@@ -1,19 +1,17 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import { fetchIdsByType, fetchItem, fetchItems } from './api'
+import { fetchItem, fetchItems, fetchIdsByType, fetchUser } from './api'
 
 Vue.use(Vuex)
 
 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,17 +6,22 @@
 </template>
 
 <script>
+function fetchItem (store) {
+ return store.dispatch('FETCH_ITEMS', {
+ ids: [store.state.route.params.id]
+ })
+}
+
 export default {
  name: 'item-view',
  computed: {
  item () {
  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

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