Vuex入门(四)—— action和...mapActions详解

目录Vuex总结:Mutation和Action对比总结:页面组件触发action方法:action概念:1.store.js里面action需要的参数2.XX.vue调用action触发方法语法:this.$store.dispatch("reduce")reduce为action自定义函数名一.store.js二.action.vue实现异步action点击加法或减法1s后执行效果如下图三.m

MFG_666

7746人浏览 · 2022-03-14 16:24:07

MFG_666 · 2022-03-14 16:24:07 发布

Vuex入门(一)—— state,mapState,…mapState对象展开符详解
 Vuex入门(二)—— mutations详解
 Vuex入门(三)—— getters,getters,…getters对象展开符详解
 Vuex入门(四)—— action和…mapActions详解
 Vuex入门(五)—— 封装module全网最全详解(带源码)
Vuex入门(六)——mapState, mapGetters, mapMutations, mapActions全网最全详解终结篇(带源码)

Vuex官网:https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store

Vuex总结:

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex

Mutation和Action对比总结:

1.Mutation是同步的，Action是异步的；
2.Mutation是直接变更状态，Action提交的是mutation；
3.Actions和Mutation 都支持载荷方式和对象方式进行分发。

页面组件触发action方法:

methods: {
    // 第一种写法	常规触发
    // increment() {
    //   this.$store.dispatch("add"); //  调用action里面方法   语法:this.$store.dispatch("XXX");   xxx 为action自定义函数名 触发方法
    // },
    // decrement() {
    //   this.$store.dispatch("reduce");
    // },

	// 第二种写法mapActions
    // import { mapActions } from 'vuex'   //  别忘记引入哦~~~js
    // （1）写法
    // ...mapActions([
    //   'increment'  ,// 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`   想要这样缩写写前提store.js里面action里面函数名和绑定class名字相同才可以
    //   '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后执行

<template>
  <div>
    <h1>action案例 1s后加或者减</h1>
    <div style="display: flex">
      <button style="width: 50px" @click="increment">+</button>
      {{ count }}
      <button style="width: 50px" @click="decrement">-</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count; // 取store.js里面state的count值
    },
  },
  methods: {
    increment() {
      this.$store.dispatch("add"); //  调用action里面方法   语法:this.$store.dispatch("XXX");   xxx 为action自定义函数名 触发方法
    },
    decrement() {
      this.$store.dispatch("reduce");
    },

    // 传参数
    // //  1.以载荷形式分发
    // this.$store.dispatch('incrementAsync', {
    //     amount: 10
    // })
    // // 2.以对象形式分发
    // this.$store.dispatch({
    //     type: 'incrementAsync',
    //     amount: 10
    // })
  },
};
</script>

效果如下图

在这里插入图片描述

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

引入import { mapActions } from ‘vuex’

代码如下：

<template>
  <div>
    <h1>...mapActions案例 1s后加或者减</h1>
    <div style="display: flex">
      <button style="width: 50px" @click="increment">+</button>
      {{ count }}
      <button style="width: 50px" @click="decrement">-</button>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'   //  别忘记引入哦~~~
export default {
  computed: {
    count() {
      return this.$store.state.count; // 取store.js里面state的count值
    },
  },
  methods: {
    // 第一种写法
    // ...mapActions([
    //   'increment'  ,// 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`   想要这样缩写写前提store.js里面action里面函数名和绑定class名字相同才可以
    //   'decrement'
    // ])
    // 第二种写法
    ...mapActions({
      increment: 'add', // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`  
      decrement:'reduce'
    }),
  },
};
</script>

效果和上面图一样

推荐博主写的比较清晰

1.https://blog.csdn.net/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.csdn.net/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.csdn.net/muzidigbig/article/details/83789415