Update tab by vuex

.eslintrc.js

@@ -36,6 +36,7 @@ module.exports = {
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
     'no-console': 'off',
-    "linebreak-style": ["error", process.env.NODE_ENV === 'prod' ? "unix" : "windows"]
+    "linebreak-style": ["error", process.env.NODE_ENV === 'prod' ? "unix" : "windows"],
+    "no-param-reassign": 0,
   }
 }

package.json

@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "vue": "^2.1.10",
-    "vue-router": "^2.2.0"
+    "vue-router": "^2.2.0",
+    "vuex": "^2.2.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",
@@ -81,6 +82,7 @@
     "vue-loader": "^11.0.0",
     "vue-style-loader": "^2.0.0",
     "vue-template-compiler": "^2.1.10",
+    "vuex": "^2.2.1",
     "webpack": "^2.2.1",
     "webpack-bundle-analyzer": "^2.2.1",
     "webpack-dev-middleware": "^1.10.0",

src/main.js

@@ -8,6 +8,7 @@ import 'muse-ui/dist/theme-carbon.css';
 
 import App from './App';
 import router from './router';
+import store from './store/store';
 
 Vue.use(MuseUI);
 
@@ -16,8 +17,9 @@ Vue.filter('arr2string', value => value.join(' / '));
 Vue.filter('fixNum', num => (num ? (Number(num).toFixed(1)) : '暂无评分'));
 
 /* eslint-disable no-new */
-new Vue({
+window.t = new Vue({
   el: '#app',
+  store,
   router,
   template: '<App/>',
   components: { App },

src/router/index.js

@@ -12,41 +12,78 @@ Vue.use(VueRouter);
 
 
 export default new VueRouter({
+  mode: 'history',
   routes: [
     {
       path: '/test',
       component: Test,
     },
-    {
-      path: '/',
-      redirect: '/movie',
-      name: 'Home',
-      component: Home,
-      children: [
+        /**
+         *嵌套路由写法
         {
-          path: 'movie',
-          redirect: 'movie/home',
-          name: 'Movie',
-          component: Movie,
+          path: '/',
+          redirect: '/movie',
+          name: 'Home',
+          component: Home,
           children: [
             {
-              path: 'home',
-              name: 'MovieHome',
-              component: MovieTab,
-            },
-            {
-              path: 'subject/:id',
-              name: 'MovieSubject',
-              component: MovieSubject,
-            },
-            {
-              path: 'search',
-              name: 'MovieSearch',
-              component: MovieSearch,
+              path: 'movie',
+              redirect: 'movie/home',
+              name: 'Movie',
+              component: Movie,
+              children: [
+                {
+                  path: 'home',
+                  name: 'MovieHome',
+                  component: MovieTab,
+                },
+                {
+                  path: 'subject/:id',
+                  name: 'MovieSubject',
+                  component: MovieSubject,
+                },
+                {
+                  path: 'search',
+                  name: 'MovieSearch',
+                  component: MovieSearch,
+                },
+              ],
             },
           ],
         },
-      ],
+        */
+
+    {
+      path: '/',
+      redirect: '/movie',
+      name: 'Home',
+      component: Home,
+    },
+    {
+      path: '/movie',
+      redirect: '/movie/home',
+      name: 'Movie',
+      component: Movie,
+    },
+    {
+      path: '/movie/home',
+      name: 'MovieHome',
+      component: MovieTab,
+    },
+    {
+      path: '/movie/subject/:id',
+      name: 'MovieSubject',
+      component: MovieSubject,
+    },
+    {
+      path: '/movie/search',
+      name: 'MovieSearch',
+      component: MovieSearch,
+    },
+        // 重定向
+    {
+      path: '/*',
+      redirect: '/',
     },
   ],
 });

src/store/movies/module.js

@@ -1,60 +1,67 @@
 import * as type from './type';
 import * as api from './api';
 
-const state={
-    movies: {
-        [api.MOVIESTYPE.inTheaters]: {
-            total: 0,
-            subjects:[],
-            describe: '',
-        },
-        [api.MOVIESTYPE.comingSoon]: {
-            total: 0,
-            subjects:[],
-            describe: '',
-        },
-    },
-    movieQuery: {
-        total: 0,
-        subjects: [],
-        describe: '',
-    },
-};
 
 const mutations = {
-    [type.FETCH_MOVIES](state, payload){
-        state.movies[payload.type].subjects = state.movies[payload.type].subjects.concat(payload.subjects);
-        state.movies[payload.type].total=state.movies[payload.type].subjects.length;
-    },
-    [type.FETCH_MOVIES_QUERY](state, payload){
-        state.movieQuery.subjects = state.movieQuery.subjects.concat(payload.subjects);
-        state.movieQuery.total=state.movies[payload.type].subjects.length;
-    },
-    [type.CLEAR_MOVIES_QUERY](state){
-        state.movieQuery.total=0;
-        state.movieQuery.subjects=[];
-    }
+  [type.FETCH_MOVIES](state, payload) {
+    state.movies[payload.type].subjects =
+        state.movies[payload.type].subjects.concat(payload.subjects);
+    state.movies[payload.type].total = state.movies[payload.type].subjects.length;
+  },
+  [type.FETCH_MOVIES_QUERY](state, payload) {
+    state.movieQuery.subjects = state.movieQuery.subjects.concat(payload.subjects);
+    state.movieQuery.total = state.movies[payload.type].subjects.length;
+  },
+  [type.CLEAR_MOVIES_QUERY](state) {
+    state.movieQuery.total = 0;
+    state.movieQuery.subjects = [];
+  },
+  [type.FETCH_MOVIES_TAB](state, tab) {
+    state.tab = tab;
+  },
 };
 
 const actions = {
-    [type.FETCH_MOVIES](context, payload){
-        api.fetchMovies(payload.type,{start: payload.start||0, })
+  [type.FETCH_MOVIES](context, payload) {
+    api.fetchMovies(payload.type, { start: payload.start || 0 })
             .then(data => context.commit(type.FETCH_MOVIES, {
-                type: payload.type,
-                subjects: data.subjects,
+              type: payload.type,
+              subjects: data.subjects,
             }));
-    },
-    [type.FETCH_MOVIES_QUERY](context, payload){
-        api.FETCH_MOVIES_QUERY(payload)
-            .then(data => context.commit(type.FETCH_MOVIES_QUERY), data);
-    },
-    [type.CLEAR_MOVIES_QUERY](context){
-        context.commit(type.CLEAR_MOVIES_QUERY);
-    }
+  },
+  [type.FETCH_MOVIES_QUERY](context, payload) {
+    api.fetchMoviesQuery(payload)
+            .then(data => context.commit(type.FETCH_MOVIES_QUERY, data));
+  },
+  [type.CLEAR_MOVIES_QUERY](context) {
+    context.commit(type.CLEAR_MOVIES_QUERY);
+  },
+  [type.FETCH_MOVIES_TAB](context, tab) {
+    context.commit(type.FETCH_MOVIES_TAB, tab);
+  },
 };
 
 export default {
-    state,
-    mutations,
-    actions,
-}
+  state: {
+    movies: {
+      [api.MOVIESTYPE.inTheaters]: {
+        total: 0,
+        subjects: [],
+        describe: '',
+      },
+      [api.MOVIESTYPE.comingSoon]: {
+        total: 0,
+        subjects: [],
+        describe: '',
+      },
+    },
+    movieQuery: {
+      total: 0,
+      subjects: [],
+      describe: '',
+    },
+    tab: 'in_theaters',
+  },
+  mutations,
+  actions,
+};

src/store/movies/type.js

@@ -2,6 +2,7 @@ export const FETCH_MOVIES = 'FETCH_MOVIES';
 export const FETCH_MOVIES_IN_THEATERS = 'FETCH_MOVIES_IN_THEATERS';
 export const FETCH_MOVIES_COMING_SOON = 'FETCH_MOVIES_COMING_SOON';
 export const CLEAR_MOVIES = 'CLEAR_MOVIES';
+export const FETCH_MOVIES_TAB = 'FETCH_MOVIES_TAB';
 
 export const FETCH_MOVIES_QUERY = 'FETCH_MOVIES_QUERY';
 export const CLEAR_MOVIES_QUERY = 'CLEAR_MOVIES_QUERY';
@@ -10,4 +11,4 @@ export const FETCH_MOVIE_SUBJECT = 'FETCH_MOVIE_SUBJECT';
 // export const MOVIES_TYPE ={
 //   inTheaters: 'in_theaters',
 //   comingSoon: 'coming_soon',
-// }
+// }

src/store/store.js

@@ -5,7 +5,7 @@ import movie from './movies/module';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-    modules:{
-        movie,
-    },
-})
+  modules: {
+    movie,
+  },
+});

src/view/Movie/Card.vue

@@ -28,19 +28,32 @@
   </div>
 </template>
 <script>
+import { mapState } from 'vuex';
 import { fetchMovies } from './../../store/movies/api';
 
+
 export default {
   name: 'movieList',
   data() {
     return {
-      subjects: [],
     };
   },
   props: ['type'],
+  computed: mapState({
+    subjects(state) {
+      return state.movie.movies[this.type].subjects;
+    },
+  }),
   mounted() {
     this.fetchData();
   },
+  beforeUpdate() {
+    console.log(`[beforeUpdate], type: ${this.type}`);
+    this.fetchData();
+  },
+  destroyed() {
+    console.log('[destroyed]');
+  },
   methods: {
     ratingStar(item) {
       const intNum = Math.round(item);
@@ -53,10 +66,17 @@ export default {
         left,
       };
     },
+
     fetchData() {
-      fetchMovies(this.type).then((data) => {
-        this.subjects = data.subjects;
-      });
+      // doing
+      if (
+        !(this.$store.state.movie.movies[this.type].subjects &&
+          this.$store.state.movie.movies[this.type].subjects.length > 0)
+        ) {
+        fetchMovies(this.type).then((data) => {
+          this.$store.state.movie.movies[this.type].subjects = data.subjects;
+        });
+      }
     },
   },
 };