技術標籤：VUEvue

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修改的宗旨