Vue.js核心技术解析与uni-app跨平台实战开发学习笔记第10章 Vuex状态管理 10.4 actions的使用

Vuex相当于一个数据仓库，所有组件都可以到仓库中存取数据。

作用：修改state数据，异步修改

mutations只能同步修改

举个栗子

在这里插入图片描述

此时单击按钮进行自增

在这里插入图片描述

运行时会出现页面中的数据和state中的数据不统一的情况。

这说明mutations不能操作异步数据，需要使用actions

在这里插入图片描述

actions中的方法不能直接操作state中的数据，需要触发mutations中的方法，最终还得靠mutations中的方法修改数据。

HelloWorld组件中

在这里插入图片描述

运行程序

在这里插入图片描述

HelloWorld中的数据和state中的数据可以实现统一，→ 异步操作要使用actions。

【异步参数传递】

在调用actions方法时，同样可以把组件中的数据传递给Vuex

在这里插入图片描述

Vuex组件中

在这里插入图片描述

运行效果

在这里插入图片描述

首先在actions中的方法接收数据，等触发mutations中方法时把接收的数据传递出去，最终在mutations中的方法接收数据。

相关阅读:
Taro,小程序scroll-view 填满剩下的高度空间,关闭页面回跳(部分ios机型滚动不到底部)
AISummit全球人工智能技术大会顺利开幕：首日精彩回顾
WEB 渗透之XXE&XML
测试用例的设计
升级光伏供应链体系，供应商系统规范供应商管理，促进企业与供应商高效协同
数据处理时代，数据质量建设才是企业的生存之道
Notepad++ ,json 、xml 格式化插件安装不了和 github 网站访问不了最佳解决方案
经典设计原则 - SOLID
Transformer作者：指令型智能体的构建之法
windows11安装安卓程序的坑

原文地址：https://blog.csdn.net/weixin_44226181/article/details/126617215

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第10章 Vuex状态管理 10.4 actions的使用