vuex中store的action和mutations怎么使用

本文小编为大家详细介绍“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 

2、user.js

3、login.js

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

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

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

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

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