排行榜使用eventBus优化性能 [ci skip]

.electron-vue/webpack.renderer.config.js

@@ -3,7 +3,7 @@
 process.env.BABEL_ENV = 'renderer'
 
 const path = require('path')
-const { dependencies } = require('../package.json')
+const {dependencies} = require('../package.json')
 const webpack = require('webpack')
 
 const BabiliWebpackPlugin = require('babili-webpack-plugin')
@@ -98,6 +98,9 @@ let rendererConfig = {
     __filename: process.env.NODE_ENV !== 'production'
   },
   plugins: [
+    new webpack.ProvidePlugin({
+      Vue: ['vue/dist/vue.esm.js', 'default']
+    }),
     new ExtractTextPlugin('styles.css'),
     new HtmlWebpackPlugin({
       filename: 'index.html',

src/renderer/view/rank/detail/index.js

@@ -1,9 +1,11 @@
-import { mapState, mapActions } from 'vuex'
-import Vue from 'vue'
+import { mapActions } from 'vuex'
+import eventBus from '../eventBus'
 
 export default {
   computed: {
-    ...mapState('rank', ['info'])
+    info() {
+      return eventBus.rankInfo
+    }
   },
   methods: {
     ...mapActions('api', ['play']),
@@ -16,8 +18,7 @@ export default {
     }
   },
   beforeRouteEnter(to, from, next) {
-    console.log(Vue.store.state.rank.info)
-    if (Vue.store.state.rank.info) {
+    if (eventBus.rankInfo) {
       next()
     } else {
       Vue.router.push({name: 'rank.main'})

src/renderer/view/rank/eventBus.js

@@ -0,0 +1,7 @@
+export default new Vue({
+  data() {
+    return {
+      rankInfo: null
+    }
+  }
+})

src/renderer/view/rank/main/index.vue

@@ -2,77 +2,28 @@
     <div :class="s.app">
         <p>网易云音乐排行榜</p>
         <ul :class="s.main">
-            <li v-for="item in list"
-                :class="s.item"
-            >
-                <div :class="s.cover">
-                    {{item.name}}
-                    <Icon type="play1" :class="s.play" @click.native="playList(item.list)"></Icon>
-                </div>
-                <div :class="s.img">
-                    <img :src="item.list[0].album.cover"/>
-                </div>
-                <ul :class="s.songs" @click="go2RankList(item)">
-                    <li v-for="(song,index) in item.list.splice(0,3)" :class="s.song">
-                        <span>{{index + 1}}</span>
-                        <span>{{song.name}}</span>-
-                        <span>
-                            <template v-for="singer in song.artists">
-                                {{singer.name}}
-                            </template>
-                        </span>
-                    </li>
-                </ul>
-            </li>
+            <v-item v-for="(item,index) in list" :key="index" :id="index"></v-item>
         </ul>
     </div>
 </template>
 <script>
-  import { mapState } from 'vuex'
+  import vItem from './item.vue'
 
   export default {
+    components: {vItem},
     data() {
       return {
-        list: []
+        list: new Array(21)
       }
-    },
-    computed: {
-      ...mapState('rank', ['rankList']),
-    },
-    methods: {
-      // 获取排行榜
-      async getList() {
-        for (let i = 0; i < 21; i++) {
-          try {
-            const {data} = await this.$api.getTopList(i.toString())
-            this.list.push(data)
-          } catch (e) {
-            console.warn(e)
-          }
-        }
-      },
-      // 播放排行榜
-      playList(list) {
-        list = list.map(item => {
-          return {
-            ...item,
-            source: 'netease'
-          }
-        })
-        this.$store.dispatch('api/play', list[0])
-        this.$store.commit('c_playlist/update', list.splice(0, 30))
-      },
-      // 跳转至排行榜详情
-      go2RankList(info) {
-        this.$store.commit('rank/update', {
-          info
-        })
-        this.$router.push({name: 'rank.detail'})
-      }
-    },
-    created() {
-      this.getList()
     }
   }
 </script>
-<style lang="scss" module="s" src="./index.scss"></style>
+<style lang="scss" module="s">
+    .app {
+        padding: 0 16px;
+        .main {
+            display: flex;
+            flex-wrap: wrap;
+        }
+    }
+</style>