vuex中store的action和mutations用法
作者:zb0002011
这篇文章主要介绍了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,而不是直接变更状态。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。