位置: IT常识 - 正文
Vuex系列之 Action 的使用(vue的actions)
编辑：rootadminVuex系列之 Action 的使用 文章の目录一、定义 Action二、触发 Action1、触发 actions 的第一种方式2、触发 actions 的第二种方式：2.1、从 vuex 中按需导入 mapActions 函数2.2、将指定的 actions 函数，映射为当前组件的 methods 函数写在最后
本文链接地址:https://www.jiuchutong.com/zhishi/294611.html
转载请保留说明！
推荐整理分享Vuex系列之 Action 的使用(vue的actions)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vuex中action,vue actions,vuex中action,vuex action mutation,vuex中action,vuex action mutation,vue actions,vuex action作用,内容如对您有帮助，希望把文章链接给更多的朋友！
Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。
一、定义 Action// 创建store数据源，提供唯一公共数据export default new Vue.Store({// state 中存放的就是全局共享的数据state: {count: 0},mutations: {add(state) {// 变更状态state.count++;},addN(state, step) {state.count += step;}},actions: {addAsync(context) {setTimeout(() => {// 在 actions 中，不能直接修改 state 中的数据；// 必须通过 context.commit() 触发某个 mutation 才行context.commit("add");}, 1000);}},getters: {}});触发 actions 异步任务时携带参数：第二个参数即为传递的参数
// 创建store数据源，提供唯一公共数据export default new Vue.Store({// state 中存放的就是全局共享的数据state: {count: 0},mutations: {add(state) {// 变更状态state.count++;},addN(state, step) {state.count += step;}},actions: {addAsync(context) {setTimeout(() => {// 在 actions 中，不能直接修改 state 中的数据；// 必须通过 context.commit() 触发某个 mutation 才行context.commit("add");}, 1000);},addNAsync(context, step) {setTimeout(() => {context.commit("addN", step);}, 1000);}},getters: {}});二、触发 Action1、触发 actions 的第一种方式通过dispatch触发store的异步函数，第一个参数为异步函数名，第二个参数为携带的参数。
this.$store.dispatch("addAsync");或者
this.$store.dispatch("addNAsync", 5);2、触发 actions 的第二种方式：2.1、从 vuex 中按需导入 mapActions 函数import { mapActions } from "vuex";通过刚才导入的 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法：
2.2、将指定的 actions 函数，映射为当前组件的 methods 函数methods: {...mapActions(["addAsync", "addNAsync"])}写在最后如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O??? 如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*// 如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~ 谢谢各位读者们啦(^_^)∠※！！！
上一篇：从 0 开始最详细的微信公众号接入 AI(“从零开始”)
下一篇：elementUI使用el-upload上传文件写法总结及避坑，上传图片/视频到本地/服务器以及回显+删除(vue中elementui怎么用)
