• vuex
  一條重要的原則就是要記住 mutation 必須是同步函數(shù) 請(qǐng)看例子

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

現(xiàn)在想象，我們正在 debug 一個(gè) app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中 mutation 中的異步函數(shù)中的回調(diào)讓這不可能完成：因?yàn)楫?dāng) mutation 觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒(méi)有被調(diào)用，devtools 不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用——實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。
Redux
先從Redux的設(shè)計(jì)層面來(lái)解釋為什么Reducer必須是純函數(shù)

如果你經(jīng)常用React+Redux開(kāi)發(fā)，那么就應(yīng)該了解Redux的設(shè)計(jì)初衷。Redux的設(shè)計(jì)參考了Flux的模式，作者希望以此來(lái)實(shí)現(xiàn)時(shí)間旅行，保存應(yīng)用的歷史狀態(tài)，實(shí)現(xiàn)應(yīng)用狀態(tài)的可預(yù)測(cè)。所以整個(gè)Redux都是函數(shù)式編程的范式，要求reducer是純函數(shù)也是自然而然的事情，使用純函數(shù)才能保證相同的輸入得到相同的輸入，保證狀態(tài)的可預(yù)測(cè)。所以Redux有三大原則：

單一數(shù)據(jù)源，也就是state
state 是只讀，Redux并沒(méi)有暴露出直接修改state的接口，必須通過(guò)action來(lái)觸發(fā)修改
使用純函數(shù)來(lái)修改state，reducer必須是純函數(shù)