Vuex入门(四)—— action和

//   'decrement'
// ])
// （2）写法
...mapActions({
  increment: 'add', // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`  
  decrement:'reduce'
}),

},

### action概念:


#### 1.store.js里面action需要的参数


(1)Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。


(2)action类似于mutation，不同的是Action提交的是mutation，而不是直接变更状态，而且action里可以包含任意异步操作，每个mutation的参数1是一个对象，可以包含如下六个属性:  
 commit —————— 当前命名空间对应的commit  
 dispatch —————— 当前命名空间对应的dispatch  
 state —————— 当前命名空间对应的state  
 getters —————— 当前命名空间对应的getters  
 rootState —————— 根模块的state  
 rootGetters —————— 根模块的getters


#### 2.XX.vue调用action触发方法 语法:this.$store.dispatch(“reduce”) reduce为action自定义函数名


不能直接调用一个action,而是通过 store.dispatch来调用,dispatch可以带两个参数,如下:  
 type ———— 对应的action名  
 payload ————传入的参数


### 一.store.js



> 
> 这里使用了 Promise ，在 1 s 后提交了 mutations 中定义的 increment 递增函数。  
>  它是 ES6语法，  
>  有三种状态：  
>  Pending 进行中  
>  Resolved 已完成  
>  Rejected 失败
> 
> 
> 


#### 传参数action`第一种(context) 第二种({commit,dispatch ,state })`



> 
> 代码:
> 
> 
> 

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
count: 1,
},
mutations: { // 类似于计算属性 computed
increment(state) { // 把上面state对象当参数传入,取对象里面的进行操作
state.count++
},
decrement(state) {
state.count–
},
},
getters: {
},
actions: { // action第一种(context) 第二种({commit,dispatch ,state })
add(context) {
return new Promise(resolve => {
setTimeout(() => {
context.commit(‘increment’);
resolve();
}, 1000)
});
},
// add(context) { 执行异步加加法mutations里面调用 111111111 add可以更改为decrement在页面组件可以直接缩写为’decrement’
// setTimeout(() => {
// context.commit(‘increment’)
// }, 1000) // 1s秒后触发这个方法
// },
// add({commit}){ // 111简写方法，解构赋值 一般开发用的多
// setTimeout(() => {
// commit(‘increment’)
// },1000)// 1s秒后触发这个方法
// },
reduce(context) { // 执行异步减减法mutations里面调用 2222222222 reduce可以更改为increment在页面组件可以直接缩写为’increment’
setTimeout(() => {
context.commit(‘decrement’)
}, 1000) // 1s秒后触发这个方法
},
// reduce({commit}){ // 222 简写方法，解构赋值 一般开发用的多
// setTimeout(() => {
// commit(‘decrement’)
// },1000)// 1s秒后触发这个方法
// }
// 33333333333组合写法调用上一个action函数
// async actionA ({ commit }) {
// commit(‘gotData’, await getData())
// },
// async actionB ({ dispatch, commit }) {
// await dispatch(‘actionA’) // 等待 actionA 完成
// commit(‘gotOtherData’, await getOtherData())
// }

},
modules: {}
})

### 二.action.vue 实现异步action点击加法或减法1s后执行

action案例 1s后加或者减

### 效果如下图


![在这里插入图片描述](https://img-blog.csdnimg.cn/f9184ed8a14c4f62b75d4cf1b5b920f8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBATUZHXzY2Ng==,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


### 三.mapActions.vue …mapActions实现异步action点击加法或减法1s后执行



> 
> 引入import { mapActions } from ‘vuex’
> 
> 
> 



> 
> 代码如下：
> 
> 
> 

...mapActions案例 1s后加或者减

> 
> 效果和上面图一样
> 
> 
> 



> 
> 推荐博主写的比较清晰
> 
> 
> 


1.`https://blog.youkuaiyun.com/weixin_35955795/article/details/57412181?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7ERate-1.pc_relevant_paycolumn_v3&utm_relevant_index=2`  
 2.`https://www.cnblogs.com/greatdesert/p/11424516.html`  
 3.`https://blog.youkuaiyun.com/qq_41820577/article/details/100530155?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522164722778616780357249571%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=164722778616780357249571&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-2-100530155.pc_search_result_cache&utm_term=actions&spm=1018.2226.3001.4187`  
 4.`https://blog.youkuaiyun.com/muzidigbig/article/details/83789415`



> 
> 感觉文章好的话记得点个心心和关注，有错的地方麻烦指正一下，多谢！！！
> 
> 
>