【vue2】电商项目复习

【vue2】电商项目复习

跑别人项目

如果有报错，需要先执行npm i --legacy-peer-deps

粘贴文件CSS样式

使用.DOC文件的style样式时，因为空格原因会报错，可以先用WPS文档替换一下空格键

路由传参

参数分

params参数路径参数

query参数查询字符串

想要拿到路径参数需要在路由规则的path上添加:(参数名)例如path：'/search/:keyword?'

:表示keyword为路径参数

?可以当携带查询字符串参数到这个地址时，使路径上还有keyword

1、字符串形式

this.$router.push('/Search/' + this.keyword + '?k=' + this.keyword.toUpperCase())

2、模板字符串

this.$router.push(`/Search/${this.keyword}?k=${this.keyword.toUpperCase()}`)

3、对象(最常用)

this.$router.push({ name: 'Search', params: { keyword: this.keyword }, query: { k: this.keyword.toUpperCase() })

使用对象形式传递参数时需要在该路由规则添加name属性

三级联动组件

当一个组件在多个页面都有出现时，就可以把他注册成一个全局组件

例如要注册一个叫TypeNav.vue

在main.js中

Vue.component(TypeNav.name, TypeNav)

参数1：组件的名字

参数2：组件实体

就可以在任意组件中使用

axios二次封装

可以添加默认地址baseURL，timeout响应时长，

例如 用nprogress

请求拦截器 可以在数据请求前做一些行为

import 'nprogress/nprogress.css'
（axios实例）.interceptors.request.use((config) => {
  nprogress.start()
  return config
})

响应拦截器 在得到服务器响应前做一些行为

import 'nprogress/nprogress.css'
（axios实例）.interceptors.response.use((config) => {
  nprogress.done()
  return config
})

vuex

用来管理大量数据组件，相当于一个大仓库

state 用来存放数据状态

mutations 唯一方法修改数据状态

action 处理业务逻辑和处理异步操作，修改的不是state，提交的是mutatuins

getters 相当于计算属性

commit 调用状态中的函数

modules 把所有模块的状态放到一个大对象中会显得特别复杂，store对象也可能会变得特别臃肿，可以使用modules把已经分割好的模块集合

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

全局导入和注册模块实例

在main.js中引用和注册仓库的路径时，一定要注意起名为store和router！！！

import store from '@/store/index.js'

因为Vue的实例是一个对象，对象的内容是以键值对的形式存在的

最完整的形式：

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

简化的形式：

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

vuex的使用

组件通过仓库发起axios请求

.vue中

created() {
    this.$store.dispatch('BaseCategoryList')
  },

小仓库中

import { getBaseCategoryListAPI } from '@/api/index.js'
const state = { bcList: [] }
const mutations = {
  BCList(state, result) {
    state.bcList = result.data
  },
}
const actions = {
  async BaseCategoryList({ commit }) {
    const { data: result } = await getBaseCategoryListAPI()
    if (result.code === 200) {
      commit('BCList', result)
    }
  },
}

仓库通过action处理业务逻辑，通过mutations给state赋值

.vue中

import { mapState } from 'vuex'
computed: {
    ...mapState({
      getBaseCategoryList: (state) => {
        return state.home.bcList
      },
    }),
  },

通过...mapState方法定义一个函数，可以获取大仓库，并从中找到小仓库中的数据

lodash包

Lodash 简介 | Lodash 中文文档 | Lodash 中文网 (lodashjs.com)

含有防抖节流等各种函数方法

事件委派

问题分析

当点击以上任意词想要发生路由跳转时，最好使用事件委派的形式

如果要给每个<a>标签都添加点击跳转事件，因为一个点击事件对应一个函数，经过循环后会出现和点击事件同样数量的函数浪费资源

如果改为<router-link>标签，经过了v-for循环出了多个标签，组件还得转换为成DOM元素，会造成卡顿也会给内存造成很大的负担

解决方法

可以在所有循环项的父级，在那个不需要循环的那一项注册一个点击跳转路径事件，

具体解决

当点击某一层级的链接时，使路由跳转到搜索页面，使其路径参数为Search，查询字符串参数为具体选项和相对应的层级

一定要使其一一对应，在模板中的<a>标签中可以自定义属性，来进行区分data-categoryname, data-categoryc1, data-categoryc2, data-categoryc3

只有点击的是带有自定义属性的<a>标签，使用编程式导航进行路由跳转

goSearch(e) {
      const element = e.target
      const { categoryname, categoryc1, categoryc2, categoryc3 } = element.dataset
      if (categoryname) {
        const location = { name: 'Search' }
        const query = { categoryName: categoryname }
        if (categoryc1) {
          query.categoryC1 = categoryc1
        } else if (categoryc2) {
          query.categoryC2 = categoryc2
        } else if (categoryc3) {
          query.categoryC3 = categoryc3
        }
        location.query = query
        this.$router.push(location)
      }
    },