這次帶給大家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中文網其他相關文章！
