组合API-依赖注入：
使用provide函数和inject函数完成后代组件通讯
使用场景:
有一个父组件,里头有子组件,有孙组件,有很多后代组件,共享父组件数据
需要引入 provide
父组件写法：
import { provide } from 'vue'
setup( ) {
const money = 100
//将数据提供给后代组件 provide
provide( 'money' , money )
return { money }
}
}
子组件写法：
import { inject } from 'vue'
setup( ) {
const money = inject( 'money' )
return { money }
}
因为要遵循数据单向流原则
子组件想改变父组件的值必须通过父组件定义的方法来修改
在父组件定义方法
父组件写法：
setup( ) {
cosnt money = ref( 100 )
cosnt changgeMoney = ( saleMoney ) => {
console.log( 'changeMoney', saleMoney )
= - saleMoney
}
provide( 'changeMoney', changeMoney )
子组件写法：
setup( ) {
const money = inject( 'money' )
const = changeMoney = inject( 'changeMoney' )
const fn = ( ) => {
changeMoney( 20 )
}
return { money, fn }
}
Vue3封装axios请求：
// 1.创建一个新的axios实例
// 2.请求拦截器,如果有token进行头部携带
// 3.响应拦截器: 1.剥离无效数据 2.处理token失效
// 4.导出一个函数,调用当前的axios实例 发送请求，返回值promise
第一步：
安装axios npm i axios
第二步：
导入axios
写法：
import axios from 'axios'
第三步：
创建axios实例
const instance = ({
// axios的一些配置, baseURL timeout
baseURL,
timeout:5000
})
第四步:
// 导出baseURL 导出基准地址 ,原因其他地方不是通过axios发请求的地方用上基准地址
export const baseURL = ''
第五步：
请求拦截器
// 引入vuex
import store from '@/store'
// 请求拦截器
.request.use(config =>{
// 拦截业务逻辑
// 进行请求配置的修改
// 如果本地有token就在头部携带
// 1.获取用户信息对象
const {profile} =
// 2.判断是否有token
if() {
// 3.设置token
= `Bearer ${}`
}
return config
}, err => {
return (err)
})
第六步:
响应拦截器
// 导入路由
import router from '@/router'
//响应拦截器: 1.剥离无效数据 2.处理token失效
// res => 取出data数据, 将来调用接口的时候直接拿到的就是后台的数据
(res => , err => {
// 401 状态码 ,进入该函数
if( && === 401) {
// 1.清空无效用户信息
// 2.跳转到登录页码
// 3.跳转需要传参 (当前路由地址) 给登录页码
('user/setUser',{})
// 当前路由地址
// 组件里头: `/user?a=10` $ === /user $ === /user?a=10
// js模块中: 就是当前路由地址 是ref响应式数据
// 获取当前路由地址并转码
const fullPath = encodeURIComponent()
// encodeURIComponent 转换url编码,防止解析地址出问题
('/login?redirectUrl'+fullPath)
}
return (err)
})
第七步：
// 请求工具函数
export default (url, methods, submitData) => {
// 负责发请求: 请求地址, 请求方式 , 提交的数据
return instance ({
url,
method,
// 1.如果是get请求 需要使用params来传递submitData
// 2.如果不是get请求 需要使用data来传递submitData
// 3. [ ] 设置一个动态的key， 写js表达式, js表达式的执行结果当作KEY
// method参数: get,Get,GET 转换成消息再来判断
[() === 'get' ? 'params' : 'data']: submitData
})
}
第八步：
测试请求
<button @click="fn">测试request工具函数</button>
setup () {
const fn = () => {
// 测试请求
request('/member/profile', 'post', { a: 10 })
}
return { fn }
}