这次给大家带来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);//声明静态常量为4const 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>   </p><p>    </p><h1>这是vuex的示例</h1>     <p>组件内部count{{count}}</p>    <p>      <button>+</button>      <button>-</button>    </p>        </template> <ｓｃｒｉｐｔ>//引入mapGettersimport {mapState,mapMutations,mapGetters,mapActions} from&#39;vuex&#39;exportdefault{ name:&#39;app&#39;, data(){   return{       } }, computed:{   ...mapState([     "count"     ]), }, methods:{   ...mapActions([      "addplus",      "subplus"     ]) }}</ｓｃｒｉｐｔ><style></style>

相信看了本文案例你已经掌握了方法，更多精彩请关注本站其它相关文章！

推荐阅读：

hammer.js实现移动端的图片手势放大功能

js发布者订阅者模式使用详解

立即学习“前端免费学习笔记（深入）”；

页面内引入js有哪些方法