Installing Axios with CNPM
CNPM Install Axios-s
When installing other plug-ins, you can introduce and vue.use () directly in Main.js, but Axios is not used and can only be introduced to each component that needs to send the request immediately.
In order to solve this problem, there are two kinds of development ideas, one is to modify the prototype chain after the introduction of Axios, the second is to combine Vuex, encapsulating a Aciton. Specific implementation please look down ~
Scenario One: Rewriting the prototype chain
First introduced in the Main.js Axios
Import Axios from ' Axios '
At this point, if the Axios command cannot be used in other components. But if Axios is rewritten as the prototype property of Vue, this problem can be solved
Vue.prototype. $ajax = Axios
After you add these two lines of code in Main.js, you can use the $ajax command directly in the component's methods
Methods: {
SubmitForm () {this
. $ajax ({
method: ' Post ',
URL: '/user ',
data: {
name: ' Wise ',
info: ' Wrong '}}
}
Scenario Two: Encapsulation in Vuex
The previous article used the VUEX mutations, which, from the results, mutations resembles an event for submitting the status state in Vuex
Action and mutations are similar, the main difference being that an action can contain an asynchronous operation and can be committed by an action mutations
There is another important difference:
Mutations has an intrinsic parameter state that receives the state object in the Vuex
The action also has an intrinsic argument to the context, but the context is the parent of state, which contains state, getters
Vuex's Warehouse is store.js, introducing Axios, and adding a new method to the action
Store.js
Import vue from ' Vue '
import Vuex from ' Vuex '
//introduced Axios
import Axios from ' Axios '
vue.use (Vuex)
con St store = new Vuex.store ({
//definition State
: {
test01: {
name: ' Wise wrong '
},
test02: {
Tell: ' 12312345678 '
}
,
actions: {
//encapsulates an Ajax method
Saveform (context) {
Axios ({
Method: ' Post ',
URL: '/user ',
data:context.state.test02}}}}
)
Export Default Store
Note: Even if Axios has been introduced in Main.js and the prototype chain has been rewritten, it is not possible to use the $ajax command directly in Store.js
In other words, these two schemes are independent of each other.
You need to use this when sending a request in a component. $store. Dispatch to distribute
Methods: {
SubmitForm () {this
. $store. Dispatch (' Saveform ')
}
}
SubmitForm is a method bound on a component that will trigger Saveform to send a request to the server via Axios
Appendix: Configuring Axios
The above encapsulated method, using the Axios three configuration items, in fact, only the URL is necessary, the complete API can refer to the use of instructions
For convenience, Axios also aliases each method, such as the above Saveform method equivalent to:
Axios.post ('/user ', context.state.test02)
The complete request should also include the. Then and. catch
. Then (function (res) {
Console.log (res)
})
. catch (function (err) {
console.log (err)
})
When the request succeeds, it executes. Then, otherwise executes. catch
Both of these callback functions have their own separate scopes, and if you access this directly inside, you cannot access the Vue instance
Just add a. bind (this) to solve this problem
. Then (function (res) {
console.log (this.data)
}.bind (This))