Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？

01-02

假如說我頁面上有一個按鈕，點擊之後請求後端介面，然後將後端返回的json做相關處理之後寫入vuex的state。
現在有兩種寫法：
一種是：「請求後端介面」這個ajax代碼應該是寫在按鈕的點擊事件處理函數中，然後在這個處理函數裡面提交mutations
還一種是：直接將「請求後端介面」這個ajax代碼寫在actions中，actions中提交mutations，按鈕的點擊事件處理函數中只寫一個分發actions的按鈕
請問哪種寫法更加合適而且優雅？

另外還有一個疑問就是「將後端返回的json做相關處理」這個代碼又應該是先處理好，然後將處理好的數據傳入mutations，還是直接在mutations裡面處理？
我個人覺得後者代碼量更大，感覺有點麻煩，但是不知道會不會在解耦合，追蹤數據變化方面更好？

一種是：「請求後端介面」這個ajax代碼應該是寫在按鈕的點擊事件處理函數中，然後在這個處理函數裡面提交mutations 還一種是：直接將「請求後端介面」這個ajax代碼寫在actions中，actions中提交mutations，按鈕的點擊事件處理函數中只寫一個分發actions的按鈕

我會把所有和服務端的交互寫在 Actions 中（除非你和服務端的交互不需要界面反饋，比如前端打點的統計這種）其他情況下理論上你的頁面的狀態應該是和服務端一一對應的。

所以把對後端的請求都通過 Actions 來封裝，你業務代碼里邏輯就只有對Action 的調用操作，更形象的就是直接對數據操作。而再不用管數據的返回之類的，因為數據返回直接會改變state，而state 的改變直接會觸發 View 的更新。我覺得這個才是 vuex 和前端單向數據流方便，提高效率的地方。

總體的設計原則是Actions 是非同步，處理業務邏輯的，而 Mutation 只是簡單對state 的狀態進行改變。通過這樣你所有的組件進行的操作都可以和你的state 的狀態一一對應，代碼清晰簡單。

另外還有一個疑問就是「將後端返回的json做相關處理」這個代碼又應該是先處理好，然後將處理好的數據傳入mutations，還是直接在mutations裡面處理？

我肯定會處理好再傳入mutations，我的mutation-types 都非常的清晰就是

UPDATE_[XXX] ，ADD_[XXX]

所以除去必要的邏輯，如果有計算邏輯，或是其他格式化的邏輯，我肯定是做完以後，才調用 commit

你可以把state 理解為前端的共用資料庫， mutations 這些是增刪改，getters 是查，所以mutations 里的邏輯應該是越少越好，記得官網也有建議

如果你的數據需要掛到 vuex 的 state ，明顯應該通過 action 獲取，組件可以 dispatch 這個 action，當然用 actionsMap 更佳。

都不優雅，應該用api.js，專門來負責各種數據獲取。

這樣做的好處是可以方便緩存，比如用localstorage緩存。

有些數據可以不用每次都ajax獲取，就可以存起來。

寫代碼的一個重要目的是結構清晰，符合常規思維邏輯。放在vuex里就把這個獲取操作當作是數據層的工作，放在methods可以理解為是展現層的工作。哪個好理解用哪個，否則幾個月以後你還要轉換一下思維。

從mvvm角度來看這個問題.

method或者action ,乾的都是一件事情,做model-&>view model 的map過程.

所以你這題完全可以換個問法,我的vm,是在component的data中,還是在state中?

這裡還有一種情況,state是可以降級抽象為model的(比如上面提到的將state視為"前端資料庫"),這時候你仍然需要一層model-&>vm的邏輯層,但這裡同樣應該是錨定vm的,比如vm在data中,那render邏輯同樣也在component中,比如使用computed.

最後,其實這是很主觀的東西,只要你自己思考出了一套思維方式,並且覺得它能自洽,在各種場景,都能有一個合理無歧義的解釋,那就這樣干吧.

大四黨答一個，畢設用到vue，寫了一段時間，有一些小見解。首先你要考慮，你請求來的數據是不是要被其他組件公用？如果不是，僅僅在請求的組件內使用，就不需要放入vuex 的state里。

第二，你的ajax請求是不是要被其他地方復用，這個很大幾率上是需要的，如果需要，請將請求放入action里，方便復用，並包裝成promise返回，在調用處用async await處理返回的數據。如果不要復用這個請求，那麼直接寫在vue文件里很方便。

我個人理解，圍繞可復用，易拓展思考解決方案，往往會得到不錯的答案。

你所說的兩種都可以。

我個人如果這個操作只做一次我會把他放在 methods 里，如果能復用，放在 actions 里。

另外 mutations 是做狀態變更的，你的 json 數據要處理應該放在 actions 或者 methods 里。

數據流向：

1.actions中用ajax請求獲取到數據；

2.在actions中調用mutations中的方法；

3.在mutations中，更新state；

4.路由組件獲取新的state；

5.路由組件將更新後的數據，傳遞給子組件。

6.子組件渲染數據。

我現在的項目的目錄結構是按照vuex文檔上示例的那個項目的目錄結構做的，如下:

├── index.html ├── main.js ├── api │ └── ... # 抽取出API請求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js # 我們組裝模塊並導出 store 的地方 ├── actions.js # 根級別的 action ├── mutations.js # 根級別的 mutation └── modules ├── cart.js # 購物車模塊 └── products.js # 產品模塊

原文地址：項目結構 · GitBook

我的整體項目結構基本和這個一致，所有的 ajax 請求放在api目錄裡面，然後組件需要發起 ajax 請求的時候，在store相應的modules里中的Action調用請求，請求成功後提交 mutation，判斷action是否完成可以用Promise。

後端返回的 json 數據，我是放在 mutation 里處理的， Action 負責非同步的操作，處理數據交給 mutation。

因為項目做的不是很多，所以也沒什麼經驗，但是我感覺官方文檔的這個目錄結構就很好。

這個想法是完全錯誤的，首先store是用來管理狀態的，注意是狀態，不是數據，所以不要過度依賴store，store的數據應該簡而又簡

樓主，我想問下vue中使用ajax,get方法正常，但是post會報錯404（我是提交給一個txt文件，不知道是不是vue不支持post一個靜態文件）

推薦引入服務層 https://kenberkeley.github.io/vue-demo/dist/docs/zh-cn/development/Service-layer.html

個人傾向於第二種，action裡邊去處理ajax這種，action設計上應該就是處理這種有人操作的行為的，正好現在的項目編碼約定是這樣定的～

搬運 javascript - Vue.js中ajax請求代碼應該寫在組件的methods中還是vuex的actions中？ - SegmentFault

個人覺得，這屬於編程風格問題，項目組統一就好。

另外，也要看實際情況，比如一個用戶的照片列表，並實現滾動瀑布流懶載入，響應用戶滾動事件獲取更多照片並顯示出來，組件的交互及對界面的反饋都在組件內部進行的，那麼就沒有必要移到 vuex 里。

最開始的時候，我按照官方的建議，把介面都放到acttion中，然後各種調用commit,dispatch等等，非常的麻煩。

後來用了另外一種方法，把所有的API都放在了api.js裡面。api.js封裝了 get/create/update3個

共用的介面可以對多種資源進行處理，login介面負責初始化登錄。method按需調用這個api.js

除非必要，數據都不存儲在vuex裡面。只有頻繁使用的數據放到了vuex裡面。這樣的處理簡單了很多。

傾向於在actions處理，如果在methods處理，其實數據源還是散亂的，並沒有聚合起來，vuex沒有起到調度的作用。實際開發中，會在頁面模塊下建立一個api.js文件，然後在action中調用，這樣調用的時候就是 api.get api.list 這種形式，不需要關注介面url，而且url被統一放在了一個地方，方便管理。此外這個api.js應該由一個總的API.js(做全局處理)生成或者處理。

個人認為，actions中。

代碼量並不會大很多，你可以再封裝一個service層來處理請求數據和返回數據。

mutations則只負責state的更改。

拙見。

我覺得兩種都可以，主要看使用場景。

vuex文檔是這樣說的：

當數據在多個組件中共享時，當然是應該將數據存儲到state中。即使沒有上vuex，也應該有一個公共的用於存儲數據的對象。像前面很多答案提到的，我們可以對後端api做封裝，將api請求抽象出api.js或者service層，用來請求數據。這樣action中，只需關注請求哪些數據，而不需要維護後端api。

但使用vuex有一個問題，「緩存」問題。在頁面還有刷新之前，vuex會存儲了一些數據，當視圖不需要這些數據的時候，還需要發起清空數據的action。例如，一個搜索結果頁，第一次進入的時候，會將數據存儲在vuex中。當第二次進入時，發起action，更新state之前，第一次「緩存」的數據還在，會直接反應到視圖中。我的解決方法是，在組件的更新和銷毀的鉤子函數里，發起清空數據的action（我不太喜歡這個方案，如果有大神知道更好的方案，請告訴我，謝謝）。

當組件的數據不需要復用時，寫在methods中就可以了。當然，抽象出一層service層的話，就好管理一些。同時，這種方法可以解決我前面提到的「緩存」問題。還有一點就是，當不能確定項目是否會用到vuex時，就只能寫在methods了。