vuex（三）actions

actions：既然mutations只能处理同步函数，我大js全靠‘异步回调’吃饭，怎么能没有异步，于是actions出现了...  

actions和mutations的区别

    1.Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。

    2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下

两秒后年龄增加

看这样一段代码，大家就会明白他的使用：

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex);
 
const store = new Vuex.Store({
state: {
    age: 18,
},
mutations: {
    add: function (state,value) {
        state.age += value;
    }
},
getters: {
    age: function (state) {
        return state.age;
    }
},
actions: {
    addAsync: function (context,value) {
        setTimeout(function(){
            context.commit('add',value);
        },2000)
    }
}
});
export default store

 

上述代码中mutations先定义一个方法add方法，然后再actions中异步操作，调用mutations中的方法，间接操作state中的数据。

<template>
 
    <div @click="add" class="age">+{{age}}</div>
 
</template>
<script>
import store from '../../../utils/store';
export default {
components: {
},
data () {
    return {
    }
},
computed: {
    age: function () {
        return store.getters.age;
    }
},
methods: {
    add: function () {
        store.dispatch('addAsync',5)
    }
},
}
</script>
<style scoped>
.age {
width: 100rpx;
height: 90rpx;
line-height: 90rpx;
border: 1rpx solid #ccc;
}
</style>

上述代码中computed中的add为获取vuex中的数据，然后再methods中异步增加年龄。