vuex直接修改state 與 用dispatch/commit來修改state的差異


一. 使用vuex修改state時,有兩種方式:

1.可以直接使用 this.$store.state.變量 = xxx;

2.this.$store.dispatch(actionType, payload) 

    或者:  this.$store.commit(commitType, payload)

使用dispatch 和 commit的區別在於,前者是異步操作,后者是同步操作,所以 一般情況下,推薦直接使用commit,
 即 this.$store.commit(commitType, payload),以防異步操作會帶來的延遲問題。

二. 異同點

1.共同點: 能夠修改state里的變量,並且是響應式的(能觸發視圖更新)

2.不同點:

      若將vue創建 store 的時候傳入 strict: true, 開啟嚴格模式,那么任何修改state的操作,只要不經過

      mutation的函數,vue就會  throw error :    [vuex] Do not mutate vuex store state outside mutation handlers。

三.使用commit提交到mutation修改state的優點:

     vuex能夠記錄每一次state的變化記錄,保存狀態快照,實現時間漫游/回滾之類的操作。
     (實際本人未用到,暫時未遇到使用該特性的需求)

  結論: 官方推薦最好設置嚴格模式,並且每次都要commit來修改state,而不能直接修改state,以便於調試等。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM