vuex（三）actions

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

<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>