topic service prefetch

 <template>
   <div>
     <Layout class="article">
-      <TopicHeader ref="header" :title="topicTitle" :step="headerAnimateStep" :data="topicInfo" :share="share" @on-follow="onFollowTopic"></TopicHeader>
+      <TopicHeader ref="header" :title="topicTitle" :step="headerAnimateStep" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic"></TopicHeader>
 
       <RecycleScrollReveal :size="5" :thumbs="thumbs" ref="scroll" @scroll="onScroll" :offset="800" :on-fetch="onFetch" :manual-init="true"
       @on-inited="onInited">
         <template v-slot:eternalTop>
-          <TopicBanner ref="topicHead" :data="topicInfo" :share="share" @on-follow="onFollowTopic"></TopicBanner>
+          <TopicBanner ref="topicHead" :data="topicSimpleInfo" :share="share" @on-follow="onFollowTopic"></TopicBanner>
         </template>
         <template class="article-item" #item="{ data }">
           <ArticleItem2
@@ -30,7 +30,6 @@
         </span>
         立即参与
       </a>
-
     </Layout>
     <ArticleActionSheet v-if="showArticleDetailAction" ref="actionSheet"></ArticleActionSheet>
     <YohoActionSheet transfer v-if="showCommentAction" ref="commentAction" :full="true">
@@ -57,7 +56,7 @@ import MoreActionSheet from './components/detail/more-action-sheet';
 import TopicHeader from './components/topic/header';
 import TopicBanner from './components/topic/banner';
 import {mapState as mapYohoState, mapActions as mapYohoActions, mapMutations as mapYohoMutations, createNamespacedHelpers} from 'vuex';
-const {mapMutations, mapActions} = createNamespacedHelpers('article');
+const {mapState, mapMutations, mapActions} = createNamespacedHelpers('article');
 
 const throttleTime = 40;
 
@@ -70,7 +69,6 @@ export default {
       posId: YAS.scene.topicList,
       topicId: 0,
       topicName: '',
-      topicInfo: {},
       headerAnimateStep: 0,
       articleId: 0,
       articleIndex: -1,
@@ -87,6 +85,18 @@ export default {
   created() {
     this.topicName = this.$route.params.topicName;
   },
+  async serverPrefetch() {
+    let id = parseInt(this.$route.params.topicId, 10);
+
+    if (id > 0) {
+      return this.fetchTopicSimpleInfo({
+        topicId: id,
+        thumb: true
+      });
+    }
+
+    return;
+  },
   activated() {
     if (this.scrollTop && this.yoho.direction === 'back') {
       this.$refs.scroll.$el.scrollTop = this.scrollTop;
@@ -125,11 +135,15 @@ export default {
   },
   computed: {
     ...mapYohoState(['yoho']),
+    ...mapState(['topicInfo']),
+    topicSimpleInfo() {
+      return this.topicInfo[this.topicId] || {};
+    },
     publishUrl() {
       return this.topicId ? `?openby:yohobuy＝{"action":"go.grasspublish","params":{"topicId":"${this.topicId}","topicName":"${this.topicName}"}}` : '';
     },
     topicTitle() {
-      return this.topicName || this.topicInfo.topicName || '';
+      return this.topicName || this.topicSimpleInfo.topicName || '';
     },
     headerBgOpacity() {
       return this.headerAnimateStep / 100;
@@ -139,7 +153,7 @@ export default {
     ...mapYohoActions(['fetchUserProfile']),
     ...mapYohoMutations(['SET_STATUS_BAR_COLOR']),
     ...mapActions(['fetchTopicSimpleInfo', 'fetchTopicRelatedArticles', 'fetchArticleProductFavs']),
-    ...mapMutations(['ASYNC_ARTICLE_COMMENT', 'CHANGE_AUTHOR_FOLLOW']),
+    ...mapMutations(['ASYNC_ARTICLE_COMMENT', 'CHANGE_AUTHOR_FOLLOW', 'CHANGE_TOPIC_FOLLOW']),
     onShowComment({articleId, index}) {
       this.articleId = articleId;
       this.articleIndex = index;
@@ -206,7 +220,7 @@ export default {
 
       let step = Math.round((scrollTop - 10) / (this._topicHeaderHeight - this._headerHeight) * 100);
 
-      if (step && this.topicInfo.topicImageUrl) {
+      if (step && this.topicSimpleInfo.topicImageUrl) {
         this.headerAnimateStep = Math.max(Math.min(step, 100), 0);
       }
 
@@ -233,12 +247,7 @@ export default {
       return Promise.all([
         this.fetchTopicSimpleInfo({topicId: this.topicId}).then(res => {
           if (res.code === 200) {
-            let data = get(res, 'data', {});
-
-            data.topicId = this.topicId;
-            data.hasAttention = data.isAttend === 'Y';
-            this.topicInfo = data;
-            this.setPageShareInfo(data);
+            this.setPageShareInfo(get(res, 'data', {}));
           }
 
           if (!get(res, 'data.topicImageUrl')) {
@@ -299,11 +308,8 @@ export default {
       this.CHANGE_AUTHOR_FOLLOW({authorUid: data.authorUid, authorType: data.authorType, follow, type: this.type});
     },
     onFollowTopic(follow) {
-      this.topicInfo.hasAttention = follow;
-
-      if (follow) {
-        this.reportTopicFollow();
-      }
+      this.CHANGE_TOPIC_FOLLOW({topicId: this.topicId, follow});
+      follow && this.reportTopicFollow();
     },
     onResize(index) {
       this.$nextTick(() => {

@@ -281,7 +281,7 @@ export default {
 
     return result;
   },
-  async fetchTopicSimpleInfo({ commit, state }, {topicId}) {
+  async fetchTopicSimpleInfo({ commit, state }, {topicId, thumb}) {
     if (state.fetchTopicInfo) {
       return Promise.resolve({});
     }
@@ -290,7 +290,7 @@ export default {
     const result = await this.$api.post('/api/grass/getGrassTopicSimpleInfo', {topicId});
 
     if (result.code === 200) {
-      commit(Types.FETCH_TOPIC_INFO_SUCCESS, assign({topicId}, result.data));
+      commit(Types.FETCH_TOPIC_INFO_SUCCESS, {topicId, data: result.data, thumb});
     } else {
       commit(Types.FETCH_TOPIC_INFO_FAILD, {});
     }

@@ -266,19 +266,26 @@ export default {
   [Types.FETCH_TOPIC_INFO_REQUEST](state, topicId) {
     state.fetchTopicInfo = true;
   },
-  [Types.FETCH_TOPIC_INFO_SUCCESS](state, data) {
+  [Types.FETCH_TOPIC_INFO_SUCCESS](state, {topicId, data, thumb}) {
     state.fetchTopicInfo = false;
-    data.hasAttention = data.isAttend === 'Y';
-    data.viewModel = data.viewModel || 1;
-    state.topicInfo = data;
+
+    if (!thumb) {
+      data.hasAttention = data.isAttend === 'Y';
+    }
+
+    data.topicId = topicId;
+    Vue.set(state.topicInfo, topicId, data);
   },
   [Types.FETCH_TOPIC_INFO_FAILD](state) {
     state.fetchTopicInfo = false;
     state.topicInfo = {};
   },
   [Types.CHANGE_TOPIC_FOLLOW](state, {topicId, follow}) {
-    if (+state.topicInfo.topicId === +topicId) {
-      state.topicInfo.hasAttention = follow;
+    let data = state.topicInfo[topicId];
+
+    if (data) {
+      data.hasAttention = follow;
+      Vue.set(state.topicInfo, topicId, data);
     }
   },
   [Types.FETCH_ARTICLE_SINGLE_DETAIL_REQUEST](state, topicId) {