vuex学习之Actions的用法详解

2019-11-19 15:38:44

字体：大中小

来源：转载

供稿：网友

Action 类似于 mutation，不同在于：

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

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

<template> <div id="app">   <div id="appaaa">    <h1>这是vuex的示例</h1>    <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之mutation和action的基本使用

下一篇：jquery在vue脚手架中的使用方式示例