如何在vuex中使用Actions

本篇文章给大家分享的是有关如何在vuex中使用Actions，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

Action 类似于 mutation，不同在于：

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');   } }; //导出一个模块 export default new Vuex.Store({   state,   mutations,   actions })

2.在App.vue中 代码如下：

<template>  <div id="app">    <div id="appaaa">     <h2>这是vuex的示例</h2>     <p>组件内部count{{count}}</p>     <p>       <button @click = "addplus">+</button>       <button @click = "subplus">-</button>     </p>     </p>   </div>  </div> </template> <script> //引入mapGetters  import {mapState,mapMutations,mapGetters,mapActions} from 'vuex' export default {  name:'app',  data(){    return {          }  },  computed:{    ...mapState([      "count"      ]),  },  methods:{    ...mapActions([       "addplus",       "subplus"      ])  } } </script> <style> </style>

以上就是如何在vuex中使用Actions，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。