Vue-day10

网络请求

axios

发送请求的方式

axios({ method:"get"})

axios.get()

axios.post()

二次封装

实例化axios

设置请求拦截器 可以在这里添加请求头参数

设置响应拦截器 可以在这里判断响应错误码

统一管理请求

一个请求封装成一个函数

导出每个函数

状态管理

Vuex是什么？

Vuex是一个专门为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管路应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

准备store

下载vuex

npm i vuex

实例化store

export default createStore({ })

应用store

import store from'./store'

app.use(store)

核心概念

state 负责存储数据

getters 定义计算方法（类似组件中的计算属性，每个计算方法必须有返回值）

mutations定义同步方法（可以直接修改state中的数据）

actions定义异步方法（内部可以执行异步代码，但是不能直接修改state中的数据）

modules模块化管理state中的数据

plugins配合其他插件管理state中的数据

核心api

this.$store

每个组件都可以获取$store

this.$store.commit('同步方法名'，参数) 调用同步方法，修改store中的数据

this.$store.dispatch('异步方法名'，参数) 调用异步方法，执行异步代码

端口

vite.config.js页面

设置代理

  server:{
    proxy:{ //代理
      '/api':{ //以 /api 开头的ajax请求, 自动转发到target所表示的第三方服务器
        target:'http://180.76.99.14',//目标服务器，第三方服务器
        changeOrigin:true,//开启跨域
      }
    }
  }

App.vue页面

导入

// 命名导入，按需导入
import { index_catelist, banner_list, user_login } from './api'
//集体导入到一个对象中
import * as service from './api'

mounted()方法

下查看快捷分类

    service.index_catelist().then((res) => {
      console.log(res.data);
    })

Home.vue页面

导入路由出口

导入二级路由出口

return后

class名字

async mounted(){
//请求数据
var res = await service,banner_list();
//保存
this.swiperlist=res.data.data;
//接收请求返回的结果
}

实现list组件包裹分类列表实现无限加载

导入组件

渲染页面

//发送请求获取下一页数据
//传入数组和上一页数组合并
//加载状态结束
//数据全部加载完成后判断状态