zoukankan      html  css  js  c++  java
  • Vue之Action

    (1)同步与异步

        在 mutation 中混合异步调用会导致你的程序很难调试。

        例如,当你调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?

        这就是为什么我们要区分这两个概念。在 Vuex 中,mutation 都是同步事务:

    store.commit(event-name)
    /* 任何由 "event-name" 导致的状态变更都应该在此刻完成 */

        为了处理异步操作,vuex出了Action

    (2)注册:定义actions动作提交mutation异变函数

        目前为止,我们看到,当点击后页面上的值是改变了。我们达到了修改store中状态值的目的,但是,官方并不推荐我们这样直接去修改store里面的值,而是去提交一个actions,在actions中提交mutation再去修改状态值,接下来我们修改index.js文件,先定义actions提交mutation的函数:

        【store/index.js】

        

     (3)触发:分发 Action

        Action 通过 store.dispatch 方法触发

        把commit提交mutations修改为使用dispatch来提交actions,之后我们再点击页面,效果是一样的。

       

    (4)优势---异步执行

        乍一眼看上去感觉多此一举,我们直接分发 mutation 岂不更方便?实际上并非如此,还记得 mutation 必须同步执行这个限制么?Action 就不受约束!可以在 action 内部执行异步操作。

        【store/index.js】---①异步注册:定义actions动作提交mutation异变函数

            

       【.vue单文件组件】---②触发:分发异步Action

            

    (5)载荷方式和对象方式进行分发

         Actions 支持同样的载荷方式和对象方式进行分发

         ①载荷形式

            

            

       ②对象形式类似

    (6)组合 Action----promise

         Action 通常是异步的,那么如何知道 action 什么时候结束呢?更重要的是,我们如何才能组合多个 action,以处理更加复杂的异步流程?

    首先需要明白 store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise.如果利用 async / await,也可以实现其他组合 action

         一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下,只有当所有触发函数完成后,返回的 Promise 才会执行。

        这个之后章节再做介绍。

    .

  • 相关阅读:
    2014 Super Training #7 C Diablo III --背包问题(DP)
    2014 Super Training #7 E Calculate the Function --矩阵+线段树
    2014 Super Training #7 B Continuous Login --二分
    2014 Super Training #10 G Nostop --矩阵快速幂
    2014 Super Training #10 D 花生的序列 --DP
    2014 Super Training #10 C Shadow --SPFA/随便搞/DFS
    2014 Super Training #6 F Search in the Wiki --集合取交+暴力
    2014 Super Training #6 G Trim the Nails --状态压缩+BFS
    2014 Super Training #9 F A Simple Tree Problem --DFS+线段树
    2014 Super Training #8 G Grouping --Tarjan求强连通分量
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/11331519.html
Copyright © 2011-2022 走看看