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中的方法接收数据。

相关阅读:
想要精通算法和SQL的成长之路 - 找到最终的安全状态
centos7编译安装qt4遇到的问题
MindSpore基础教程：LeNet-5 神经网络在MindSpore中的实现与训练
【elasticsearch】elasticsearch8.0.1使用rpm包安装并启用TLS
15、JAVA入门——封装
稳压二极管的应用及注意事项
Springboot 实践（20）负载均衡器Ribbon
httprunner实战接口测试笔记，拿走不谢
基于微信小程序和安卓的多功能备忘录管理系统APP
数据库基本结论

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

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