Vuex + Axios Send request

Vue originally had an officially recommended Ajax plugin Vue-resource, but since Vue was updated to 2.0, the official no longer updated Vue-resource

Currently the main Vue project chooses Axios to complete the AJAX request, and the large project uses VUEX to manage the data, so this blog will combine both to send the request

Objective:

Vuex installation will no longer be mentioned, you can refer to the previous blog Vue Crawl pit Road (iv)-the first contact with Vuex

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 ({      ' 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 Axiosimport Axios from ' Axios ' Vue.use (Vuex) Const STORE = new Vuex.store ( {  //definition State  : {    test01: {      name: ' Wise wrong '    },    test02: {Tell      : ' 12312345678 '    }  },  actions: {    //encapsulates an Ajax method    Saveform (context) {      Axios ({        ' 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))

Vuex + Axios Send request