zoukankan      html  css  js  c++  java
  • vuex中mutations与actions的使用及区别

    之前写过简单的vuex应用方法,现在写一下vuex中的   actions 和  mutations 的区别

    Mutations

    mutations 必须是同步函数,为什么?

      举个例子:  官方案例 

    mutations: {
      someMutation (state) {
        api.callAsyncMethod(() => {
          state.count++
        })
      }
    }

    每一条 mutation 被记录,devtools 都需要捕捉到前一状态和后一状态的快照。
    然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:
    因为当 mutation 触发的时候,回调函数还没有被调用,
    devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的
    状态的改变都是不可追踪的。

    Actions
    vuex为了解决mutations只有同步的问题,提出了actions(异步),专门用来解决mutations只有同步无异步的问题.
    1. 首先先了解一下actions,第一篇vuex中已经讲解了
    vuex中mutations的用法(https://www.cnblogs.com/0915ty/p/9330439.html),在这里再介绍一下
      (1).MUTATIONS
      const state = {
        xxx: null
      },
      const mutations = {
        [setState](state, value) {
          state.xxx = value
        }
      }
      此处value可以是对象,可以是值等
      组件调用方式: this.$store.commit('setState', [value])

      (2).ACTIONS
      // 第一种写法简写形式
      const actions = {
        [addPlus]({commit}) { // 简写方式,待研究
          commit('[setState]', value)
          //此处value可以是对象,可以是固定值等
        }
      }
      // 第二种形式
      const actions = {
        [addPlus](context) {
          //context 官方给出的指定对象, 此处context可以理解为store对象
          context.commit('[setState]', value)
        }
      }
      /* 两处的commit都是提交的mutations中的字符串的事件类型名称,对应会调用mutations中的回调函数 */
      actions在组件中的调用方式:
      import mapActions from 'vuex'
      methods: {
        ...mapActions: ([
         'addPlus' 
        ]),
        setAddPlus () {
          this.$store.dispatch('addPlus', [value]) // 异步调用mutations
        }
      }
      
    简单说到这里,先会用在研究原理



    再接再厉,继续努力!!!!!

  • 相关阅读:
    MongoDB分片集群还原
    集群因子(Clustering Factor)
    Sunisoft.IrisSkin.SkinEngine 设置winform皮肤
    17monipdb根据IP获得区域
    ArraySegmentSample
    RichTextBox指定全部文字显示不同颜色及部分文字高亮颜色显示
    Git 基本分支规范
    C# 获取方法内参数名称
    (转)C#中的Predicate<T>与Func<T, bool>
    EF 多线程TransactionScope事务异常"事务EFTransaction类定义:与另一个进程被死锁在 锁 资源上,并且已被选作死锁牺牲品。请重新运行该事务。"
  • 原文地址:https://www.cnblogs.com/0915ty/p/9626240.html
Copyright © 2011-2022 走看看