Vue---vuex+asiox send request

Source: Internet
Author: User
Tags bind saveform

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))

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.