Vuex  actions

actions类似mutations，不同点在于：actions提交的是mutations，而不是直接改变状态。actions可以包含任意的异步操作

actions是处理异步任务的 mutations是处理同步

小案例：每点击一次按钮 怎加服务器服务器数字

node服务：app.js

//引入express
const express = require('express') 
//创建app应用
let app = new express()
//处理get请求
app.get('/add',function(req,res){
    res.send({
        a:10
    })
})
//监听3000端口
app.listen(3000,function(){
    console.log('3000端口')
})

vue main.js

import Vue from 'vue'
import App from './App.vue'

import Vuex from "vuex"
import store from "./store/store.js"
//引入axios
import axios from 'axios'
Vue.prototype.$http = axios

Vue.use(Vuex)
new Vue({
  render: h => h(App),
  store: new Vuex.Store(store)
}).$mount('#app')

app.vue

<template>
  <div>
    <p>{{$store.state.a}}</p>
    <button @click="addServe">点击怎加服务器的数字</button>
  </div>
</template>
<script>
  export default {
    methods:{
      addServe(){
        this.$store.dispatch('addServe')
      }
    }
  }
</script>
<style>
</style>

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

store.js

import axios from 'axios'
export default{
    state:{
        a:50
    },
    mutations:{
        add(state,{a}){
            state.a += a
        }
    },
    getters:{
        
    },
    actions:{
        addServe({commit}){
           // console.log(content)
            axios.get('add').then(res => {
                if(res.status == 200){
                    commit('add',{a:res.data.a})
                }
            })
        }
    }
}

actions处理异步任务，处理完之后发送commit请求，mutations进行修改state，不违背state只能是mutations修改的宗旨