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

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第10章 Vuex状态管理

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

10.4 actions的使用

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

mutations只能同步修改

举个栗子

此时单击按钮进行自增

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

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

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

HelloWorld组件中

运行程序

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

【异步参数传递】

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

Vuex组件中

运行效果

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