vuex actions调用,vuex action使用
行动作为状态管理的五大核心之一，它的属性是用来处理异步方法的，通过提交突变实现。本文将具体介绍一下行动的使用教程，需要的可以参考一下
目录
简介说明官网行动概述说明特点用法示例测试
简介
说明
本文用示例介绍状态管理的五大核心之一：行动。
官网
行动Vuex
应用程序接口参考状态管理
actions概述
说明
状态管理中的变化非常类似于事件：每个变化都有一个字符串的事件类型（类型)和一个回调函数（处理程序).这个回调函数就是我们实际进行状态更改的地方，并且它会接受状态作为第一个参数。
特点
1.异步操作，通过突变来改变陈述。
2.不能直接改变状态里的数据。
3.包含多个事件回调函数的对象。
4.执行方式：通过执行提交()来触发变化的调用，间接更新状态
5.触发方式：组件中：$store.dispatch(action名称数据1)
6.可以包含异步代码（例如：定时器，请求后端接口)。
用法
直接使用
这个. store.dispatch(操作方法名，具体值) //不分模块
这个. store.dispatch(模块名/操作方法名，具体值) //分模块
地图操作
从" vuex "导入{ mapActions }
导出默认值{
计算值：{
//不分模块
.mapActions([操作方法名])
//分模块，不改方法名
.mapActions(模块名，[操作方法名])
//分模块，不改方法名
.mapActions(模块名,{新行动方法名: 旧行动方法名})
}
}
示例
CounterStore.js
从“Vue”导入Vue
从" Vuex "导入Vuex
vue。使用(Vuex)；
const counterStore=new Vuex .商店（
{
状态：{
计数：10
},
getters: {
双重计数（州){
返回状态。计数* 2；
}
},
突变：{
增量（状态){
状态.计数
},
减量（状态){
状态。count-；
},
//带参数
addNumber(state，param1) {
state .计数=param1
},
},
动作：{
异步增量（上下文){
控制台。log( CounterStore=action:async increment )；
setTimeout(()={ context。提交( increment )}，1000)
},
asyncAddNumber(context，n) {
控制台。log( CounterStore=action:asyncAddNumber )；
setTimeout(()={ context。提交(添加数字，n)}，1000)
}
}
}
);
导出默认柜台商店
Parent.vue(入口组件)
模板
div class=outer
h3父组件/h3
组分a/组分a
组件b/组件b
/div
/模板
脚本
从导入组件答./ComponentA ；
从导入组件乙./ComponentB ；
导出默认值{
姓名：家长，
组件：{ComponentA，ComponentB}，
}
/脚本
样式范围。外部{
边距：20px
边框：2px纯红；
填充：20px
}
/风格
ComponentA.vue(异步修改状态管理的数据)
模板
div class=容器
h3组件A/h3
button @ click= thiasync增量异步加1/按钮
button @ click= thiasyncaddnumber 异步增加指定的数/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
国家：5
}
},
方法：{
thiasync增量(){
这个100美元商店。分派(“异步增量”)
},
thiasyncaddnumber(){
这个100美元商店。分派( asyncAddNumber ，this.cnt)
}
}
}
/脚本
样式范围。容器{
边距：20px
边框：2px纯蓝；
填充：20px
}
/风格
ComponentB.vue(读取状态管理的数据)
模板
div class=容器
h3组件B/h3
差异计数器的值：{{thisCount}}/div
差异计数器的2倍：{{thisDoubleCount}}/div
/div
/模板
脚本
导出默认值{
计算值：{
thisCount() {
归还这个100美元商店。状态。数数；
},
thisDoubleCount() {
归还这个100美元商店。吸气剂。重复计算；
},
}
}
/脚本
样式范围。容器{
边距：20px
边框：2px纯蓝；
填充：20px
}
/风格
路由（路由器/索引. js)
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
导入父项自./components/Parent ；
Vue.use(路由器)
导出默认新路由器({
路线：[
{
路径："/parent "，
姓名：家长，
组件：父组件，
}
],
})
测试
访问：http://localhost:8080/#/parent
到此这篇关于状态管理中行动的使用教程详解的文章就介绍到这了，更多相关状态管理操作内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。