Vue2向Vue3过度Vuex核心概念actions

妖狐艹你老母 2024-03-24 21:52 25阅读 0赞

#### 目录 ####

*   *  1 核心概念 - actions
     *   *  1.定义actions
         *  2.组件中通过dispatch调用
     *  2 辅助函数 -mapActions

--------------------

### 1 核心概念 - actions ###

![在这里插入图片描述][df9c179884c343cdad6433ee5ac75a31.png]

> state是存放数据的，mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)，
> 
> actions则负责进行异步操作

**说明：mutations必须是同步的**

**需求: 一秒钟之后, 要给一个数 去修改state**

![在这里插入图片描述][43985e6e3d7c451ea65b536b856389b0.png]

#### 1.定义actions ####

mutations: {
        
      changeCount (state, newCount) {
        
        state.count = newCount
      }
    }
    
    
    actions: {
        
      setAsyncCount (context, num) {
        
        // 一秒后, 给一个数, 去修改 num
        setTimeout(() => {
        
          context.commit('changeCount', num)
        }, 1000)
      }
    },

#### 2.组件中通过dispatch调用 ####

setAsyncCount () {
        
      this.$store.dispatch('setAsyncCount', 666)
    }

![在这里插入图片描述][4752a734c5554a9db17f8fdad2c82266.png]

### 2 辅助函数 -mapActions ###

1.目标：掌握辅助函数 mapActions，映射方法

> mapActions 是把位于 actions中的方法提取了出来，映射到组件methods中

Son2.vue

import {
         mapActions } from 'vuex'
    methods: {
        
       ...mapActions(['changeCountAction'])
    }
    
    //mapActions映射的代码 本质上是以下代码的写法
    //methods: {
        
    //  changeCountAction (n) {
        
    //    this.$store.dispatch('changeCountAction', n)
    //  },
    //}

直接通过 this.方法 就可以调用

[df9c179884c343cdad6433ee5ac75a31.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/206f219670714bf9b73df067c2e39f3d.png
[43985e6e3d7c451ea65b536b856389b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/35240cbaf0814b5d914c2e2245fc6ba4.png
[4752a734c5554a9db17f8fdad2c82266.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/5c1462e7c396409691165d5a22813712.png