Vue实战项目(六): 优化三级联动分类列表

1. 三级联动分类列表的数据只需要执行一次，之前将请求写在了typeNav组件下面，就会触发多次请求，所以将请求调整至App.vue中

// src >>> App.vue
<script>
import Header from './components/Header'
import Footer from './components/Footer'

export default {
    name: 'App',
    components: {
        Header,
        Footer
    },
    mounted() {
        //通知Vuex发请求，获取数据，存储于仓库之中
        //派发一个action获取商品分类的三级列表的数据
        this.$store.dispatch('categoryList')
    },
}
</script>

2. 根据需求三级联动分类列表在首页一直存在，在搜索页需要触发才会出现

//src >>> components >>> typeNav >>> index.vue
<template>
	<div class="container" @mouseleave="leaveShow" @mouseenter="enterShow">
	 ....
	</div>
</template>

<script>
export default {
   name: 'typeNav',
   data() {
       return {
           show: true,
       }
   },
   //组件挂载完毕：可以向服务器发请求，获取服务器数据，展示数据
   mounted() {
	    //进入页面的时候判断是否是home页面，不是就隐藏
	    if(this.$route.path !== '/home') {
	        this.show = false
	    }
   },
   mothods: {
      enterShow() {
          if(this.$route.path !== '/home') {
               this.show = true
           }
      },
      leaveShow() {
         if(this.$route.path !== '/home') {
              this.currentIndex = -1
              this.show = false
          }
      }
   }
}
</scirpt>