天天看點

vuex 異步ajax,Vue.js中ajax請求代碼應該寫在元件的methods中還是vuex的actions中?

假如說我頁面上有一個按鈕,點選之後請求後端接口,然後将後端傳回的json做相關處理之後寫入vuex的state。

現在有兩種寫法:

一種是:“請求後端接口”這個ajax代碼應該是寫在按鈕的點選事件處理函數中,然後在這個處理函數裡面送出mutations

還一種是:直接将“請求後端接口”這個ajax代碼寫在actions中,actions中送出mutations,按鈕的點選事件處理函數中隻寫一個分發actions的按鈕

請問哪種寫法更加合适而且優雅?

另外還有一個疑問就是“将後端傳回的json做相關處理”這個代碼又應該是先處理好,然後将處理好的資料傳入mutations,還是直接在mutations裡面處理?

我個人覺得後者代碼量更大,感覺有點麻煩,但是不知道會不會在解耦合,追蹤資料變化方面更好?

個人覺得,這屬于程式設計風格問題,項目組統一就好。

另外,也要看項目實際情況,比如一個使用者的照片清單,并實作滾動瀑布流懶加載,響應使用者滾動事件擷取更多照片并顯示出來,元件的互動及對界面的回報都在元件内部進行的,那麼就沒有必要移到 vuex 裡。

官方的建議是異步都放在actions中

簡單小活動的話,所有調用都可以放在methods裡面

但如果是主業務的話,就放在actions中,不然的話随着業務的擴充,你可以想象你的元件代碼變得越來越長

vuex 異步ajax,Vue.js中ajax請求代碼應該寫在元件的methods中還是vuex的actions中?