🔀 Merge pull request #35 from Styx11/dev

refactor main.js with vuex

src/main.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import router from './router';
 import store from './store';
+import { mapActions, mapState } from 'vuex';
 import KBManager from '@/script/keyboard_manager';
 import LSManager from '@/script/localStorage_manager';
 
@@ -18,87 +19,57 @@ new Vue({
   el: '#root',
   router,
   store,
-  data: {
-    settings: {
-      tips: false,
-      timer: false,
-      disableSolved: false,
-      dark: false
-    },
-    books: [],// 收藏夹
-    slideName: '',
+  computed: {
+    ...mapState({
+      dark: state => state.settings.dark,
+      slideName: state => state.slideName,
+    }),
   },
   created () {
     const settings = LSManager.getGameState('settings');
     const books = LSManager.getGameState('books');
 
-    if (settings) this.settings = settings;
-    if (books) this.books = books;
+    if (settings) this.initializeSettings(settings);
+    if (books) this.initializeBooks(books);
   },
   mounted () {
-    if (this.settings.dark) body.classList.add('mdui-theme-layout-dark');
-
-    this.bus.$on('getSets', this.getSets);// 接收设置
-    this.bus.$on('markBook', this.markBook);// 添加收藏
-    this.bus.$on('delBook', this.delBook);// 删除收藏
-    this.bus.$on('delBooks', this.delBooks);// 删除列表收藏
+    if (this.dark) body.classList.add('mdui-theme-layout-dark');
   },
-  beforeDestroy () {
-    // 解除事件绑定
-    this.bus.$off('getSets');
-    this.bus.$off('markBook');
-    this.bus.$off('delBook');
-    this.bus.$off('delBooks');
+  methods: {
+    ...mapActions([
+      'initializeSettings',
+      'initializeBooks',
+      'mutateSlideName'
+    ]),
   },
   watch: {
     '$route' (to, from) {
       const toPath = to.path;
       const fromPath = from.path;
 
       if (fromPath === '/') {// 根路径split后长度也为2，所以直接判断
-        return this.slideName = 'slideInRight';
+        return this.mutateSlideName('slideInRight');
       } else if (toPath === '/') {
-        return this.slideName = 'slideInLeft';
+        return this.mutateSlideName('slideInLeft');
       }
 
       const toDepth = toPath.split('/').length;
       const fromDepth = fromPath.split('/').length;
-      this.slideName = toDepth > fromDepth ? 'slideInRight' : 'slideInLeft';
-    }
-  },
-  methods: {
-    getSets (e) {
-      const item = e.item;
-      const setting = e.setting;
-
-      this.settings[item] = setting;
-      this.settings.dark
+      toDepth > fromDepth 
+        ? this.mutateSlideName('slideInRight')
+        : this.mutateSlideName('slideInLeft');
+    },
+    dark () {
+      this.dark
         ? body.classList.add('mdui-theme-layout-dark')
         : body.classList.remove('mdui-theme-layout-dark');
-
-      LSManager.setGameState('settings', this.settings);
-    },
-    markBook (book) {
-      this.books.push(book);
-      LSManager.setGameState('books', this.books);
-    },
-    delBook (id) {
-      this.books = this.books.filter(book => book.id !== id);
-      LSManager.setGameState('books', this.books);
-    },
-    delBooks (books) {
-      this.books = this.books.filter((book, index) => !books[index]);// 返回未被选中项
-      LSManager.setGameState('books', this.books);
     }
   },
   render () {
     return (
       <div>
         <transition enter-active-class={this.slideName}>
-          <router-view
-            settings={this.settings}
-            slideName={this.slideName}
-          />
+          <router-view />
         </transition>
       </div>
     );