这次给大家带来vuex+Actions使用详解，vuex+Actions使用的注意事项有哪些，下面就是实战案例，一起来看一下。
Action 提交的是 mutation，而不是直接变更状态. Action 是异步的，mutation是同步的。
沿用vuex学习---简介的案例：这里是加10 减1
1.在store.js 中 代码为：
import Vue from'vue'
import Vuex from'vuex'
//使用vuex模块
Vue.use(Vuex);
//声明静态常量为4
const state = {
count : 4
};
const mutations = {
add(state,n){
state.count +=n.a;
},
sub(state){
state.count--;
}
};
const actions = {
//2种书写方式
addplus(context){//可以理解为代表了整个的context
context.commit('add',{a:10})
},
subplus({commit}){
commit('sub');
}
};
//导出一个模块
exportdefaultnewVuex.Store({
state,
mutations,
actions
})2.在App.vue中 代码如下：
<template>
<p id="app">
<p id="appaaa">
<h1>这是vuex的示例</h1>
<p>组件内部count{{count}}</p>
<p>
<button @click ="addplus">+</button>
<button @click ="subplus">-</button>
</p>
</p>
</p>
</p>
</template>
<script>
//引入mapGetters
import {mapState,mapMutations,mapGetters,mapActions} from'vuex'
exportdefault{
name:'app',
data(){
return{
}
},
computed:{
...mapState([
"count"
]),
},
methods:{
...mapActions([
"addplus",
"subplus"
])
}
}
</script>
<style>
</style>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是vuex+Actions使用详解的详细内容。更多信息请关注PHP中文网其他相关文章！
