vuex的action

什么是action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作

总结来说action就是处理异步任务，mutations是处理同步

我们通常使用action请求一些异步任务，比如一些初始化全局数据等等。

 

 Vue-cli的代理跨域

我们先回顾一下关于请求

新建一个app.js文件

我们用express服务处理请求任务

npm install --save -dev express

const express=require("express");
const app=new express();
app.get("/add",function(req,res){
    res.send({a:1})
})
app.listen(3000,()=>{
    console.log("监听3000端口")
})

此时打开浏览器可以看到

 

 

现在我们遇到了一个问题，node返回的接口是3000端口，但是我们的项目起的8080端口，此时势必会遇到跨域的问题

我们使用代理跨域解决跨域的请求问题

我们的vue-cli3给我们留个一个后门，我们可以通过配置一个vue.config.js文件来配置相关的项目配置，命名必须是vue.config.js，目录位置也必须是根目录

 

 

 

我们需要给vue.config.js文件配置哪些内容？

答案是：我们要配置跨域的相关内容， 我们使用代理跨域

vue.confog.js代码

 

配置或者修改了这个文件的代码需要重新启动项目服务

module.export={
    devServer:{
        // 配置代理跨域
        Proxy:{
             // "/"指的是哪些请求会触发代理跨域，/指的是任意的请求都会触发
            "/":{
                  // target指的是代理地址，我们需要代理请求的地址
                target:"http://127.0.0.1:3000",
                changeOrigin:true,
                pathRewrite:{
                    '^/':''
                }
            }
        }
    }
}

 

我们利用axios插件服务我们完成请求任务

axios地址：http://www.axios-js.com/

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

 

我们在项目中引入axios

npm instal --save -dev axios

安装成功后，我们在main.js文件中引入和注册axios

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

通过都是用$http代表请求任务的

App.vue文件

<template>
<div>
    {{b}}
    <button @click="addServer">按我加服务那么多数字</button>
</div>
</template>

<script>
export default {
    data() {
        return {
            b: 100
        }
    },
    methods: {
        addServer() {
            this.$http.get('/add').then((res) => {
                if (res.status == 200) {
                    this.b += res.data.a
                }
                // this.b += res.a
            })
        }
    }
}
</script>

<style lang="scss" scoped>

</style>

 

 

 

Vuex发送action请求

我们看一个请求加服务数字的案例

App.vue

<template>
<div>
    <p>{{$store.state.a}}</p>
    <button @click="addServer">点击通过发送action请求修改全局的store</button>
</div>
</template>

<script>
export default {
    methods: {
        addServer() {
            this.$store.dispatch('addServer')
        }
    }
}
</script>

<style lang="scss" scoped>

</style>

和mutations不同的是action发送的是dispatch请求，dispatch就是用来处理异步任务的

store.js

import axios from 'axios'
export default {
    state: {
        a: 1
    },
    mutations: {
        add(state, { a }) {
            state.a += a
        }
    },
    actions: {
        addServer({ commit }) {

            // 处理异步请求
            axios.get("add").then(res => {
                if (res.status == 200) {
                    commit("add", { a: res.data.a })
                }
            })
        }
    }
}

actions处理异步任务，处理完后通过发送commit任务，mutations进行修改state，这个没有违背state只能是mutation修改的宗旨