什么是action
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作
总结来说action就是处理异步任务，mutations是处理同步
我们通常使用action请求一些异步任务，比如一些初始化全局数据等等。
Vue-cli的代理跨域
我们先回顾一下关于请求
新建一个app.js文件
我们用express服务处理请求任务
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,()=>{
7 console.log("监听3000端口")
8 })
此时打开浏览器可以看到
现在我们遇到了一个问题，node返回的接口是3000端口，但是我们的项目起的8080端口，此时势必会遇到跨域的问题
我们使用代理跨域解决跨域的请求问题
我们的vue-cli3给我们留个一个后门，我们可以通过配置一个vue.config.js文件来配置相关的项目配置，命名必须是vue.config.js，目录位置也必须是根目录
我们需要给vue.config.js文件配置哪些内容？
答案是：我们要配置跨域的相关内容， 我们使用代理跨域
vue.confog.js代码
配置或者修改了这个文件的代码需要重新启动项目服务
1 module.export={
2 devServer:{
3 // 配置代理跨域
4 Proxy:{
5 // "/"指的是哪些请求会触发代理跨域，/指的是任意的请求都会触发
6 "/":{
7 // target指的是代理地址，我们需要代理请求的地址
8 target:"http://127.0.0.1:3000",
9 changeOrigin:true,
10 pathRewrite:{
11 '^/':''
12 }
13 }
14 }
15 }
16 }
我们利用axios插件服务我们完成请求任务
axios地址：http://www.axios-js.com/
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
我们在项目中引入axios
npm instal --save -dev axios
安装成功后，我们在main.js文件中引入和注册axios
1 import axios from "axios" 2 Vue.prototype.$http=axios
通过都是用$http代表请求任务的，所以如果我们后期自己开发项目遇到请求的时候也遵循这个规定
App.vue文件
1 <template>
2 <div>
3 {{b}}
4 <button @click="addServer">按我加服务那么多数字</button>
5 </div>
6 </template>
7
8 <script>
9 export default {
10 data() {
11 return {
12 b: 100
13 }
14 },
15 methods: {
16 addServer() {
17 this.$http.get('/add').then((res) => {
18 if (res.status == 200) {
19 this.b += res.data.a
20 }
21 // this.b += res.a
22 })
23 }
24 }
25 }
26 </script>
27
28 <style lang="scss" scoped>
29
30 </style>
Vuex发送action请求
我们看一个请求加服务数字的案例
App.vue
1 <template>
2 <div>
3 <p>{{$store.state.a}}</p>
4 <button @click="addServer">点击通过发送action请求修改全局的store</button>
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>
和mutations不同的是action发送的是dispatch请求，dispatch就是用来处理异步任务的
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 // 处理异步请求
15 axios.get("add").then(res => {
16 if (res.status == 200) {
17 commit("add", { a: res.data.a })
18 }
19 })
20 }
21 }
22 }
actions处理异步任务，处理完后通过发送commit任务，mutations进行修改state，这个没有违背state只能是mutation修改的宗旨