vueX redux資料流轉過程（適用回答面試官）

vuex資料流轉過程：

每乙個 vuex 應用的核心就是 store，裡面又包括:

（1）state（資料）：用來存放資料源，就是公共狀態;

（2）getters（計算屬性）：類似vue的計算屬性，主要用來過濾一些資料；

（3）actions（事件）：actions可以理解為通過將mutations裡面處裡資料的方法變成可非同步的處理資料的方法，簡單的說就是非同步運算元據。view 層通過 store.dispath 來分發 action。

（4）mutations（同步事物）：mutations定義的方法動態修改vuex 的 store 中的狀態或資料。

（5）modules（模組）：使用單一狀態樹，致使應用的全部狀態集中到乙個很大的物件，所以把每個模組的區域性狀態分裝使每乙個模組擁有本身的 state、mutation、action、getters、甚至是巢狀子模組；

所以，簡單的來說，vuex的工作流程就是：

（1）通過dispatch去提交乙個actions，

（2） actions接收到這個事件之後，在actions中可以執行一些非同步|同步操作，根據不同的情況去分發給不同的mutations，

（3）actions通過commit去觸發mutations，

（4）mutations去更新state資料，state更新之後，就會通知vue進行渲染

redux、react-redux資料流轉過程：

1、引入redux、react-redux外掛程式

2、使用redux裡的createstore建立store倉庫，建立乙個state.js檔案存放資料，建立reducer.js檔案做條件判斷，建立乙個檔案用來放所有的action。

把所有的action放在乙個檔案中的好處：

你的函式不會散落在各個元件中，在維護中能夠比較直觀的檢視到每個函式實現了哪個功能。

在store檔案中使用thunk增強dispatch的功能，讓他能接受乙個函式作為引數。

3、在主入口檔案中用provier標籤包裹元件，將store作為屬性掛載到上面。

在需要用到redux的state中的資料的元件中，使用connect將state和元件連線起來。

這兩個結合起來就能實現將資料和方法掛載到props上面，在元件中使用this.dispatch提交函式，使用this.props.state中的資料。

工作流程：

在元件中的鉤子函式或者事件函式中使用this.props.dispatch提交函式，在action檔案中找到這個函式，函式中傳送axios請求，與後端完成互動，拿到資料後，派發到reducer裡面，根據情況做判斷，修改state中的值。

然後元件中只要state的值變了，相當於props也變了，元件就會更新。