Vue2向Vue3过度Vuex核心概念actions 妖狐艹你老母 2024-03-24 21:52 87阅读 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.方法 就可以调用 <button @click="changeCountAction(200)">+异步</button> [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
相关 Vue2向Vue3过度Vuex核心概念getters 目录 1 核心概念 - getters 1.定义getters 2.使用getters 朱雀/ 2024年03月24日 21:52/ 0 赞/ 106 阅读
相关 Vue2向Vue3过度Vuex核心概念actions 目录 1 核心概念 - actions 1.定义actions 2.组件中通过dispatch调用 2 妖狐艹你老母/ 2024年03月24日 21:52/ 0 赞/ 88 阅读
相关 Vue2向Vue3过度Vuex核心概念mutations 目录 1 核心概念-mutations 1.定义mutations 2.格式说明 3.组件中提 绝地灬酷狼/ 2024年03月24日 21:51/ 0 赞/ 90 阅读
相关 Vue2向Vue3过度Vuex核心概念module模块 目录 1 核心概念 - module 1.目标 2.问题 3.模块定义 - 准备 state 深碍√TFBOYSˉ_/ 2024年03月24日 21:51/ 0 赞/ 80 阅读
相关 Vue2向Vue3过度Vuex核心概念state状态 目录 1 核心概念 - state 状态 1.目标 2.提供数据 3.访问Vuex中的数据 阳光穿透心脏的1/2处/ 2024年03月24日 21:51/ 0 赞/ 87 阅读
相关 Vue2向Vue3过度核心技术综合案例 目录 1 面经基础版-案例效果分析 1.面经效果演示 2.功能分析 3.实现思路分析:配置路由 曾经终败给现在/ 2024年03月24日 21:50/ 0 赞/ 94 阅读
相关 Vue2向Vue3过度核心技术插槽 目录 1 插槽-默认插槽 1.作用 2.需求 3.问题 4.插槽的基本语 Love The Way You Lie/ 2024年03月24日 21:48/ 0 赞/ 84 阅读
相关 Vue2向Vue3过度核心技术生命周期 目录 1 Vue生命周期 2 Vue生命周期钩子 3 生命周期钩子小案例 1.1 在created中发送数据 小灰灰/ 2024年03月24日 21:35/ 0 赞/ 82 阅读
相关 Vue2向Vue3过度核心技术watch侦听器 目录 1 watch侦听器 1.1 作用: 1.2 语法: 1.3 侦听器代码准备 以你之姓@/ 2024年03月24日 21:33/ 0 赞/ 58 阅读
还没有评论,来说两句吧...