Vuex's action

What is action?

Action is similar to mutation, different lies in:

  • TheAction is submitted by mutation instead of directly changed.
  • Action can contain any asynchronous operation

Summary, Action is to process asynchronous tasks, Mutations is processing synchronization

We usually use the Action request some asynchronous tasks, such as some initialization global data, etc.

 

Vue-CLI agent cross-domain

Let’s take a look at the request

Create a new app.js file

We use Express service to process request tasks

npm install –save -dev express

1 const express=require("express");2 const app=new express();3 app.get("/add",function(req,res){4     res.send({a:1})5 })6 app.listen(3000,()=>{7Console.log ("Listening 3000 Port")8 })

Open the browser at this time to see

 

 

Now we have a problem, the interface returned by Node is a 3000-port, but the 8080 port from our project, this is bound to encounter cross-domain issues.

We use the proxy cross-domain to solve the problem of cross-domain request issues

Our Vue-CLI3 gives us a back door, we can configure the relevant project configuration by configuring a vue.config.js file, the naming must be Vue.config.js, the directory location must also be rooted

 

 

What are we needed to configure this for the Vue.config.js file?

The answer is: We must configure the relevant content of the cross-domain, we use the agent cross-domain

Vue.confog.js code

 

Configure or modify the code for this file, you need to restart the project service

 1 module.export={ 2     devServer:{ 3         //Configure the agent cross-domain 4         Proxy:{ 5              //"/" means which requests will trigger a proxy cross-domain, / refers to any requests will trigger 6             "/":{ 7                   //Target refers to a proxy address, we need the address of the proxy request 8                 target:"http://127.0.0.1:3000", 9                 changeOrigin:true,10                 pathRewrite:{11                     '^/':''12                 }13             }14         }15     }16 }

 

We use the AXIOS plug-in service to complete the request task

Axios Address:http://www.axios-js.com/

axios is a promise-based HTTP library that can be used in browser and node.js

 

We introduce Axios in the project

npm instal –save -dev axios

After the installation is successful, we introduce and register Axios in main.js files.

1 import axios from "axios"2 Vue.prototype.$http=axios

By requesting the task with $ HTTP representative, if we have encountered the request, we will follow this rule when we have encountered the request.

app.vue file

 1 <template> 2 <div> 3     {{b}} 4<Button @ click = "addserver"> So many numbers in Plus "</ button> 5 </div> 6 </template> 7  8 <script> 9 export default {10     data() {11         return {12             b: 10013         }14     },15     methods: {16         addServer() {17             this.$http.get('/add').then((res) => {18                 if (res.status == 200) {19                     this.b += res.data.a20                 }21                 // this.b += res.a22             })23         }24     }25 }26 </script>27 28 <style lang="scss" scoped>29 30 </style>

 

 

 

Vuex Send an Action Request

Let’s take a case requested to add a number of services.

App.vue

 1 <template> 2 <div> 3     <p>{{$store.state.a}}</p> 4<Button @ Click = "Addserver"> Click to modify the global Store </ Button> by sending an action. 5 </div> 6 </template> 7  8 <script> 9 export default {10     methods: {11         addServer() {12             this.$store.dispatch('addServer')13         }14     }15 }16 </script>17 18 <style lang="scss" scoped>19 20 </style>

Different from Mutations is that the action sent is the Dispatch request. Dispatch is used to handle asynchronous tasks.

store.js

 1 import axios from 'axios' 2 export default { 3     state: { 4         a: 1 5     }, 6     mutations: { 7         add(state, { a }) { 8             state.a += a 9         }10     },11     actions: {12         addServer({ commit }) {13 14             //Treatment of asynchronous requests15             axios.get("add").then(res => {16                 if (res.status == 200) {17                     commit("add", { a: res.data.a })18                 }19             })20         }21     }22 }

Actions handle asynchronous tasks, after processing, by sending a commit task, Mutations modifies State, this no violation of State can only be a mutation modification