返回顶部

[Vue.js] vuex 里面 actions mutation的区别

[复制链接]
awagink 显示全部楼层 发表于 2021-3-9 15:53:42 |阅读模式 打印 上一主题 下一主题
试听
亲,登录后才能试听哦。
登录方法:
1.电脑版在右上角【登录】
2.手机版点右下角【登录】进入登录页面。
面试没说清楚。这个太丢人回来整理下:

事实上在 vuex 里面 actions 只是一个架构性的概念,并不是必须的,说到底只是一个函数,你在里面想干嘛都可以,只要最后触发 mutation 就行。异步竞态怎么处理那是用户自己的事情。


  1. Vuex.Store({
  2.   state,
  3.   actions,
  4.   mutation
  5. });
复制代码


vuex 真正限制你的只有 mutation 必须是同步的这一点,在vue中,只有mutation才能正真改变VUEX stroe中的state,
 Action 提交的是 mutation,而不是直接变更状态。

   Action 可以包含任意异步操作。 个人觉得这个action的 产生就是 因为mutation 不能进行异步操作,如果有异步操作那么就用action 来提交mutation


Mutation 必须是同步函数
一条重要的原则就是要记住 mutation 必须是同步函数。为什么?请参考下面的例子:

  1. mutations: {
  2.   someMutation (state) {
  3.     api.callAsyncMethod(() => {
  4.       state.count++
  5.     })
  6.   }
  7. }
复制代码

现在想象,我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。<br>然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回调函数还没有被调用,<br>devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
在组件中提交 Mutation
你可以在组件中使用 this.$store.commit('xxx') 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store)。


  1. import { mapMutations } from 'vuex'

  2. export default {
  3.   // ...
  4.   methods: {
  5.     ...mapMutations([
  6.       'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

  7.       // `mapMutations` 也支持载荷:
  8.       'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
  9.     ]),
  10.     ...mapMutations({
  11.       add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
  12.     })
  13.   }
  14. }
复制代码


如果想要获取对应的状态你就可以直接使用this.$store.state获取,当然,也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去,如.


const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } })
Action去comit一个mutation。它要指定去commit哪一个mutation,然后指定结束之后要做什么什么事情就要给出一个函数,所以说mutation的构成有两点名称和函数。


  1. const store = new Vuex.Store({
  2.   state: {
  3.     count: 0
  4.   },
  5.   mutations: {
  6.     increment (state) {
  7.       state.count++
  8.     }
  9.   },
  10.   actions: {
  11.     increment (context) {
  12.       context.commit('increment')
  13.     }
  14.   }
  15. })
复制代码


action 异步操作


  1. actions: {
  2.   incrementAsync ({ commit }) {
  3.     setTimeout(() => {
  4.       commit('increment')
  5.     }, 1000)
  6.   }
  7. }
复制代码




厚积薄发,笨鸟先飞。
您需要登录后才可以回帖 登录 | 注册

本版积分规则

纳速健身网 成立于2006年8月,是目前国内优秀健身运动网站,拥有超过30万会员。形成了以健身伴奏音乐、养生知识、武术、太极拳、健身气功、运动健身等优质视频、图文教程及文章信息分享的一体化站点。为健身爱好者提供了一个健身运动信息资源交流的平台。
  • 纳速QQ群乙:151815303
  • 纳速QQ群丙:79104490
  • 微信交流群:微信好友搜索【nasuwang】加客服微信进群,备注【纳速】
  •                     或者扫描页面底部右侧二维码添加客服微信>>>
  • 微信公众号

  • 微信群客服交流

  • Copyright © 2006-2021, 纳速健身网. | | 辽ICP备13002388号-1 辽公安网备21050202000005号公安网备号 纳速武术-乙 QQ