Combined API-dependency injection:
Using providefunctionComplete communication with the inject function to complete descendant component
Use scenarios:
There is a parentComponents,There are child components, grand components, and many descendant components, and share parent component data
Need to introduce provide
Parent component writing:
import { provide } from 'vue'
setup( ) {
const money = 100
//Provide data to descendant components provide
provide( 'money' , money )
return { money }
}
}
Subcomponent writing:
import { inject } from 'vue'
setup( ) {
const money = inject( 'money' )
return { money }
}
Because we must follow the principle of one-way data flow
If a child component wants to change the value of the parent component, it must be modified through the method defined by the parent component.
Define methods in parent component
Parent component writing:
setup( ) {
cosnt money = ref( 100 )
cosnt changgeMoney = ( saleMoney ) => {
console.log( 'changeMoney', saleMoney )
= - saleMoney
}
provide( 'changeMoney', changeMoney )
Subcomponent writing:
setup( ) {
const money = inject( 'money' )
const = changeMoney = inject( 'changeMoney' )
const fn = ( ) => {
changeMoney( 20 )
}
return { money, fn }
}
Vue3 packageaxiosask:
// 1. Create a new axios instance
// 2. Request an interceptor, if there is a token for head carrying
// 3. Response interceptor: 1. Strip invalid data 2. Processing token invalid
// 4. Export a function, call the current axios instance, send a request, return the value promise
first step:
Install axiosnpm i axios
Step 2:
Import axios
Writing method:
import axios from 'axios'
Step 3:
Create an axios instance
const instance = ({
// Some configurations of axios, baseURL timeout
baseURL,
timeout:5000
})
Step 4:
// Export baseURL Export base address, because other places are not used to use the base address where requests are sent through axios
export const baseURL = ''
Step 5:
Request Interceptor
// Introduce vuex
import store from '@/store'
// Request an interceptor
.request.use(config =>{
// Intercept business logic
// Make changes to request configuration
// If there is a token locally, carry it on the head
// 1. Obtain user information object
const {profile} =
// 2. Determine whether there is a token
if() {
// 3. Set up token
= `Bearer ${}`
}
return config
}, err => {
return (err)
})
Step 6:
Response Interceptor
// Import routes
import router from '@/router'
//Response interceptor: 1. Strip invalid data 2. Processing token invalid
// res => Get out the data data, and the data you get directly from the background when calling the interface in the future
(res => , err => {
// 401 status code, enter this function
if( && === 401) {
// 1. Clear invalid user information
// 2. Jump to login page number
// 3. The jump requires a parameter (current routing address) to give the login page number
('user/setUser',{})
// Current routing address
// Inside the component: `/user?a=10` $ === /user $ === /user?a=10
// In js module: It is the current routing address, which is ref responsive data
// Get the current routing address and transcode
const fullPath = encodeURIComponent()
// encodeURIComponent converts url encoding to prevent problems with parsing addresses
('/login?redirectUrl'+fullPath)
}
return (err)
})
Step 7:
// Request tool function
export default (url, methods, submitData) => {
// Responsible for sending requests: request address, request method, submitted data
return instance ({
url,
method,
// 1. If it is a get request, you need to use params to pass submitData
// 2. If it is not a get request, you need to use data to pass submitData
// 3. [ ] Set a dynamic key, write a js expression, and the execution result of the js expression is regarded as KEY
// method parameters: get,Get,GET is converted into a message and then judged
[() === 'get' ? 'params' : 'data']: submitData
})
}
Step 8:
Test request
<button @click="fn">Test request tool function</button>
setup () {
const fn = () => {
// Test request
request('/member/profile', 'post', { a: 10 })
}
return { fn }
}