尚品汇 前台项目---day3超详细笔记

1、Vuex实现模块式开发

如果项目过大，组件过多，接口也很多，数据也很多，可以让vuex实现模块式开发

步骤

创建store文件夹->Search文件夹->index.js文件（Home文件夹同样）

//search模块的小仓库
const state = {};
const mutations = {};
const actions = {};
const getters = {};
export default{//上面写完仍是常量（对象），需对外暴露别的模块才能使用
    state,
    mutations,
    actions,
    getters
}

store文件夹->index.js

import Vue from 'vue';
import Vuex from 'vuex';//使用vuex前需先引入
//需要使用插件一次
Vue.use(Vuex);
 
// 引入小仓库
import Home from './Home';
import Search from './Search';
//对外暴露Store类的一个实例
export default new Vuex.Store({
    // 实现vuex仓库模块式开发存储数据
    modules:{
        Home,Search
    }
});

2、动态展示三级联动数据（完成TypeNav三级联动展示数据业务）

由于TypeNav是全局组件，因此将“src/pages/Home”中的“TypeNav”文件夹移动到“src/components”文件夹中

 在main.js中修改TypeNav的路径，删除测试请求部分代码

import Vue from 'vue'
import App from './App.vue'
import store from './store';

// 三级联动---全局组件
import TypeNav from '@/components/TypeNav';
// 第一个参数：全局组件的名字，第二个参数：哪一个组件
Vue.component(TypeNav.name,TypeNav);
// 引入路由
import router from '@/router'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),router,store
}).$mount('#app')

 当组件挂载完毕，可以向服务器发请求，然后获取数据，显示数据了。在“src/componetns/TypeNav/index.vue”中，添加如下代码：

其中，categoryList是一个action

 找到“src/store/Home/index.js”这个数据仓库中编辑action，代码如下。 当请求成功后，继续将响应的数据（result.data）提交到mutations： 

其中，引入的接口名是在“src/api/index.js”中定义的：

 

可以看到打印的响应数据如下：

 

 将数据仓库中的数据修改为服务器返回的数据：

  此时可以看到仓库中已经有了服务器返回的数据：

 

  接下来就需要在组件中拿到仓库中的数据进行显示。打开“src/components/TypeNav/index.vue”，添加如下代码：

  此时可以看到页面上出现响应的数据：

 

 

 接下来需要让数据显示在相应的位置上，删除如下区域代码：

 

  改为如下代码：

 

 3、完成一级分类动态添加背景颜色

第一种解决方案：采用样式完成

TypeNav文件夹->index.vue文件

 

第二种解决方案：通过JS完成

TypeNav文件夹->index.vue文件

JS动态添加背景颜色代码

若移到“全部商品分类”，仍要求有蓝色，需移出到父元素（外面）才无颜色

则需将“全部商品分类”和“图书、音像、电子书刊”（它们原先是兄弟关系）外套一个父亲div，将鼠标移出的方法委托到父亲div上。

 4、二三级商品分类的显示与隐藏

第一种解决方案：采用样式完成

 最开始的时候，是通过CSS样式display：block|none显示与隐藏二三级商品分类

第二种解决方案：通过JS控制二三级商品分类的显示与隐藏

  5、演示卡顿现象引入防抖与节流

正常情况：当事件触发非常频繁，而且每一次的触发，回调函数都要去执行（如果时间很短，而回调函数内部有计算，那么很可能出现浏览器卡顿）

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才触发回调，把频繁触发变为少量触发

防抖：前面的所有的触发都被取消，最后一次执行 在规定的时间之后才会触发，也就是说，如果连续快速的触发，只会执行一次

lodash插件：里面封装函数的防抖与节流的业务【闭包+延迟器】

lodash函数库对面暴露 _ 函数

防抖：用户操作很频繁，但是只是执行一次

节流：用户操作很频繁，但是把频繁的操作变为少量操作【可以给浏览器有充裕的时间解析代码】

节流：闭包+延时器

6、完成三级联动的节流操作

 throttle回调函数别用箭头函数，可能出现上下文this

默认暴露module.exports，则引入时throttle不用加花括号 {}

7、三级联动组件路由跳转和传递参数

三级联动用户可以点击的：一级分类、二级分类、三级分类，当你点击的时候

Home模块跳转到Search模块，一级会把用户选中的产品（产品的名字、产品的ID）在路由跳转的时候，进行传递。

三级联动：如果使用声明式导航router-link，可以实现路由跳转与传递参数。但是需要注意，会出现卡顿现象。

router-link：是一个组件，但服务器的数据返回之后，循环出现很多的router-link组件【创建组件实例的】。创建组件实例的时候，一瞬间创建1000+很耗内存的，因此出现了卡顿现象。所以，不采用声明式导航router-link进行路由跳转

 使用编程式导航的时候，每一个a标签都加上@click，过于繁琐

 

修改：事件委派+编程式导航实现路由跳转与传递参数

 将@click="goSearch"委派到其就近的父元素，放在div class="item"或div class="all-sort-list2"都可

 console.log(element.dataset);

 路由跳转方法代码

// 进行路由跳转的函数
    goSearch(event){
      // 最好的解决方案：编程式导航+事件委派
      // 存在一些问题：事件委派，是把全部的子节点【h3,dt,dl,em】的事件委派给父亲节点
      // 点击a标签的时候，才会进行路由跳转【怎么能确定点击的一定是a标签】
      // 第一个问题：把子节点当中的a标签，加上自定义属性data-categoryName,其余子节点是没有的
      let element = event.target;
      // console.log(element)
      //获取到当前触发这个事件的节点【h3、a、dt、d1】，需要带有data-categoryname这样的节点【一定是a标签】
      //节点有一个属性dataset属性，可以获取节点的自定义属性与属性值
      // console.log(element.dataset);
      let {categoryname,category1id,category2id,category3id} = element.dataset;
       //如果标签身上拥有categoryname一定是a标签
      if (categoryname) {
        //整理路由跳转的参数
        let location = { name: "search" };
        let query = { categoryName: categoryname };
         //一级分类，二级分类，三级分类的a标签
        if (category1id) {
          query.category1Id = category1id;
        } else if (category2id) {
          query.category2Id = category2id;
        } else {
          query.category3Id = category3id;
        }
        //动态给location配置对象添加query属性
        location.query = query;
        //路由跳转
        this.$router.push(location)
      }
    }
  },

 

 

复习

1）商品分类的三级列表由静态变为动态形式【获取服务器数据：解决跨域问题】

2）函数防抖与节流【面试评论很高】

3）路由跳转：声明式导航（router-link）、编程式导航

编程式导航解决卡顿问题：自定义属性