diff --git a/.eslintrc.js b/.eslintrc.js
index 684d17c..354243e 100644
--- a/.eslintrc.js
+++ b/.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,
   }
 }
diff --git a/package.json b/package.json
index ecd9c88..455be40 100644
--- a/package.json
+++ b/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",
diff --git a/src/main.js b/src/main.js
index 0bd68c5..1f9c688 100644
--- a/src/main.js
+++ b/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 },
diff --git a/src/router/index.js b/src/router/index.js
index 8b9eac6..8bebf70 100644
--- a/src/router/index.js
+++ b/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: '/',
     },
   ],
 });
diff --git a/src/store/movies/module.js b/src/store/movies/module.js
index 053ee4f..ef55921 100644
--- a/src/store/movies/module.js
+++ b/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,
-}
\ No newline at end of file
+  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,
+};
diff --git a/src/store/movies/type.js b/src/store/movies/type.js
index 819eeeb..1c6b5d8 100644
--- a/src/store/movies/type.js
+++ b/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',
-// }
\ No newline at end of file
+// }
diff --git a/src/store/store.js b/src/store/store.js
index da23520..07f0ee9 100644
--- a/src/store/store.js
+++ b/src/store/store.js
@@ -5,7 +5,7 @@ import movie from './movies/module';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-    modules:{
-        movie,
-    },
-})
\ No newline at end of file
+  modules: {
+    movie,
+  },
+});
diff --git a/src/view/Movie/Card.vue b/src/view/Movie/Card.vue
index 3771176..8d63658 100644
--- a/src/view/Movie/Card.vue
+++ b/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;
+        });
+      }
     },
   },
 };
diff --git a/src/view/Movie/Tab.vue b/src/view/Movie/Tab.vue
index fdff603..ecf6c78 100644
--- a/src/view/Movie/Tab.vue
+++ b/src/view/Movie/Tab.vue
@@ -5,27 +5,28 @@
 				<mu-icon-button icon='menu' slot="left" />
 				<mu-icon-button icon='search' @click="gotoSearch()" slot='right' />
 			</mu-appbar>
-			<mu-tabs :value="activeTab" @change="handleTabChange">
-				<mu-tab value="tab1" @active="handleActive" title="正在热映" />
-				<mu-tab value="tab2" @active="handleActive" title="即将上映" />
+			<mu-tabs :value="activeTab()" @change="handleTabChange">
+				<mu-tab value="in_theaters" @active="handleActive" title="正在热映" />
+				<mu-tab value="coming_soon" @active="handleActive" title="即将上映" />
 			</mu-tabs>
 		</mu-paper>
-		<div v-if="activeTab === 'tab1'">
+		<div v-if="activeTab() === 'in_theaters'">
 			<Card type='in_theaters'></Card>
 		</div>
-		<div v-if="activeTab === 'tab2'">
+		<div v-if="activeTab() === 'coming_soon'">
 			<Card type='coming_soon'></Card>
 		</div>
 	</div>
 </template>
 
 <script>
+	import { mapState } from 'vuex';
 	import Card from './Card';
+	import * as type from './../../store/movies/type';
 
 	export default {
 	  data() {
 	    return {
-	      activeTab: 'tab1',
 	    };
 	  },
 	  components: {
@@ -33,7 +34,8 @@
 	  },
 	  methods: {
 	    handleTabChange(val) {
-	      this.activeTab = val;
+	      this.$store.dispatch(type.FETCH_MOVIES_TAB, val);
+	      // this.activeTab = val;
 	    },
 	    handleActive(val) {
 	      console.log(`---------tab active-------------${val}`);
@@ -41,6 +43,9 @@
 	    gotoSearch() {
 	      this.$router.push({ name: 'MovieSearch' });
 	    },
+	    ...mapState({
+	      activeTab: state => state.movie.tab,
+	    }),
 	  },
 	};