feat: 增加电影短评的数据

src/containers/Comments.vue

@@ -5,8 +5,18 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
   name: 'Comments',
+
+  computed: {
+    ...mapState({
+      currentComments(state) {
+        return state.comments.currentComments[`${this.$route.params.currentMovieId}`];
+      },
+    }),
+  },
 };
 </script>
 

src/router/routes/comments.js

@@ -1,13 +1,36 @@
 import Comments from '../../containers/Comments';
 import store from '../../store';
 import * as types from '../../store/mutation-types';
+import {
+  comments,
+} from '../server';
 
 export default {
   path: '/comments/:currentMovieId',
   component: Comments,
   beforeEnter: (to, before, next) => {
-    document.title = '短评 - 电影 - 豆瓣';
-    store.commit(types.LOADING_FLAG, false);
+    const currentMovieId = to.params.currentMovieId;
+    if (store.state.comments.currentComments[`${currentMovieId}`]) {
+      store.commit(types.LOADING_FLAG, false);
+      next();
+      return;
+    }
+    store.commit(types.LOADING_FLAG, true);
+    comments(currentMovieId, 20, 0).then((currentCommentsDetail) => {
+      // 成功则commit后台接口的数据，并把NET_ERROR的数据置空，并把加载中的状态置为false。
+      const id = currentCommentsDetail.subject.id;
+      store.commit(types.CURRENT_COMMENTS, {
+        [`${id}`]: currentCommentsDetail,
+        ...store.state.comments.currentComments,
+      });
+      store.commit(types.LOADING_FLAG, false);
+      store.commit(types.NET_STATUS, '');
+      document.title = `全部短评 - 电影:${currentCommentsDetail.subject.title} - 豆瓣`;
+    }).catch((error) => {
+      document.title = '出错啦 Oops… - 豆瓣';
+      store.commit(types.NET_STATUS, error);
+      store.commit(types.LOADING_FLAG, false);
+    });
     next();
   },
 };

src/store/index.js

@@ -6,6 +6,7 @@ import home from './modules/home';
 import tag from './modules/tag';
 import moviedetail from './modules/moviedetail';
 import more from './modules/more';
+import comments from './modules/comments';
 import createLogger from '../plugins/logger';
 
 Vue.use(Vuex);
@@ -24,6 +25,7 @@ export default new Vuex.Store({
     tag,
     moviedetail,
     more,
+    comments,
   },
   strict: debug,
   plugins: debug ? [createLogger()] : [],

src/store/modules/comments.js

@@ -0,0 +1,22 @@
+import * as types from '../mutation-types';
+
+const state = {
+  currentComments: {},
+};
+
+const getters = {};
+
+const actions = {};
+
+const mutations = {
+  [types.CURRENT_COMMENTS](state, currentComments) {
+    state.currentComments = currentComments;
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/store/mutation-types.js

@@ -10,3 +10,5 @@ export const CURRENT_MOVIE = 'CURRENT_MOVIE';
 export const CURRENT_TAG = 'CURRENT_TAG';
 // 首页查看更多
 export const CURRENT_SEE_MORE = 'CURRENT_SEE_MORE';
+// 电影短评列表
+export const CURRENT_COMMENTS = 'CURRENT_COMMENTS';