温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vuex中store的action和mutations怎么使用

发布时间:2022-04-12 13:44:00 来源:亿速云 阅读:780 作者:iii 栏目:开发技术

本文小编为大家详细介绍“vuex中store的action和mutations怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“vuex中store的action和mutations怎么使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

    action和mutations (this.$store.dispatch和this.$store.commit)区别

    都是调用vuex中的方法。一个异步一个同步

    • dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)

    • commit:同步操作,写法:this.$store.commit('mutations方法名',值)

    action:

    1、用于通过提交mutation改变数据

    2、会默认将自身封装为一个Promise

    3、可以包含任意的异步操作

    mutations:

    1、通过提交commit改变数据

    2、只是一个单纯的函数

    3、不要使用异步操作,异步操作会导致变量不能追踪。也就是说,用action中的函数调用mutations中的函数,进行异步操作state中的数据

    用法

    dispatch: 含有异步操作

    存储:

    this.$store.dispatch('initUserInfo',friend);

    取值:

    this.$store.getters.userInfo;

    commit:同步操作

    存储:

    this.$store.commit('initUserInfo',friend);

    取值:

    this.$store.state.userInfo;

    实例

    1、login.vue 

    vuex中store的action和mutations怎么使用

    2、user.js

    vuex中store的action和mutations怎么使用

    3、login.js

    vuex中store的action和mutations怎么使用

    action和mutation分别用来处理什么?

    • action处理异步数据最终提交到数据库

    • mutation用来同步数据做业务的处理 (vuex中store数据改变唯一的方法就是mutation)

    • Action提交的是 mutation,而不是直接变更状态。

    读到这里,这篇“vuex中store的action和mutations怎么使用”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI