Vuex的的actions属性的具体使用属性的具体使用
Vuex 的 action 属性内，可以定义异步操作逻辑，以满足某些业务场景要求。在组件内，是通过 $store.dispatch 来触发 action
定义的函数。
我们使用 action，来为计数器异步增 1。
1 Promise 方式方式
main.js：
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state, n = 1) {
state.count += n;
}
},
actions: {
asyncInrement(context) {
return new Promise(resolve => {
setTimeout(() => {
context.commit('increment');
resolve();
}, 1000)
});
}
}
});
这里使用了 Promise ，在 1 s 后提交了 mutations 中定义的 increment 递增函数。它是 ES6 语法，有三种状态：
状态状态 说明说明
Pending 进行中
Resolved 已完成
Rejected 失败
index.vue：
<template>
<div>
{{count}}
<button @click="asyncIncrementByAction">+1</button>
</div>
</template>
<script>
export default {
name: "index.vue",
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
asyncIncrementByAction() {
this.$store.dispatch('asyncInrement').then(() => {
console.log(this.$store.state.count);
})
}
}
}
</script>
2 Callback 方式方式
也可以使用普通回调来实现异步方案。
资源评论
weixin_38616359
- 粉丝: 8
- 资源: 933
最新资源
- Python 自动生成的汉字行楷体图片全
- 借助 YOLO、Segment Anything (SAM+SAM2)、MobileSAM 的 AI 支持，轻松进行 AI 辅助数据标记！！.zip
- 全景驾驶感知，只需看一眼（MIR2022）.zip
- 具有 oneflow 后端的更高效的 yolov5.zip
- 网络安全 - PHP 环境配置 - phpstudy-2016.zip - 适合 Windows 体质
- 稽查案例土增清算申请退税，说多了都是“波折”
- 具有检测和分割功能的多任务 yolov5.zip
- 稽查案例如何界定“计税价格明显偏低且无正当理由”？
- 分别使用OpenCV、ONNXRuntime部署YOLOV7目标检测，总共包含14个onnx模型，依然是包含C++和Python两个版本的程序.zip
- 精解答疑无偿赠与车库或车位是否视同销售核定营业税？
- YOLOv2：精度提升的多维策略与代码实践
- 网络安全标准实践指南——粤港澳大湾区（内地、香港）个人信息跨境处理保护要求-V1（202411）.pdf
- 2024网络安全技术技能人才职业能力图谱.pdf
- 全球数据流通与隐私科技发展报告.pdf
- AI 搜索行业发展报告 2024.pdf
- 如何为IT部门制定更好的战略计划.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
