1 当某个组件在一个地方一直显示，另一个地方移入时显示移除时隐藏

初始化数据show为true，在标签中使用v-show，设置一个方法当鼠标移入时为ture，当鼠标移除时，用this.$route.path判断是不是要隐藏的地址，如果是则show为false

2 过渡动画

但是需要注意，节点|组件务必出现v-if|v-show指令才可以使用。

用transition标签，加上name属性
<transition name="sort"></transiton>
.sort-enter{}
.sort-enter-to{}
.sort-enter-active{}

3 数据获取优化

当页面在首页和搜索页跳转时，会分别获取三级联动的数据，因此，将在三级联动中的数据请求，放在App.vue中当页面挂在后

这样数据只用请求一次

4 合并参数

在选择分类和搜索关键词时，既有params又有query，因此在跳转时，路由都应该带上，此使就应合并参数。组件TypeNav中，将params加上，先点后搜

Header组件中，将query的值加上，先搜后点

5 mockjs获取数据

首先安装npm i mockjs

1、安装依赖包mockjs，
2、在src文件夹下创建一个文件夹，文件夹mock文件夹。
3、准备模拟的数据
    把mock数据需要的图片放置于public文件夹中！
4、在mock文件夹中创建一个mockServe.js文件  
 注意：在mockServer.js文件当中对于banner.json||floor.json的数据没有暴露，但是可以在server模块中使用。因为对于webpack当中一些模块：图片、json，不需要对外暴露，因为默认就是对外暴露。

5:通过mock模块模拟出数据（mockServe.js)
通过Mock.mock方法进行模拟数据

6、回到main.js入口文件，引入mockServe.js  
import "@/mock/mockServe.js";

7、在api文件夹中创建mockAjax.js，对axios进行二次封装，与服务器不同的为baseURL不同
mock：【baseURL:'/mock'】专门获取模拟数据用的axios实例。

8、在需要获取接口数据时，则在api文件下的index.js文件中使用
mockRequests.get("/banner");

6 mock获取数据

以获取banner的数据为例

6.1 dispatch

首先在需要数据的组件中，在加载时dispatch

6.2 vuex

用vuex，在store文件中找到对应的，在actions里面，通过API里面的接口函数调用，向服务器发送请求获取服务器的数据然后commit，到mutations里修改state。此使数据便修改了

import { reqGetBannerList} from "@/api";//引入从mock获取数据的方法
const state = { bannerList: []};

//2.
const actions = {
  //通过API里面的接口函数调用，向服务器发送请求获取服务器的数据
  const mutations = {
      GETBANNERLIST(state, bannerList) {
      state.bannerList = bannerList;
  },
};

//1.
  async getBannerList({ commit }) {
    let result = await reqGetBannerList();
    // console.log(result);
    if (result.code == 200) {
      // console.log(result);
      commit("GETBANNERLIST", result.data);
    }
  },
}
//对外暴露
export default {
  state,
  mutations,
  actions,
  getters,
};

6.3

获取则需引入import { mapState } from "vuex"; 在computed中计算数据

然后就可以在标签中使用，比如这里的categoryList，也是通过以上步骤获取的

Vue项目实战注意点-part4（mock）！！！important