SlideShare a Scribd company logo
從 FLUX 與 REDUX 思考
VUEX 架構
Chris
《Chris 技術筆記》
https://dwatow.github.io/
依 FLUX 的理理論,實現 REDUX 的單向資料流
包含非同步動作放在 Dispatch,其中有 middlewares 處理理 API
依 FLUX 的理理論,實現VUEX 的單向資料流
包含非同步動作放在 Dispatch,其中有 ?? 處理理 API
View
Store
State
Getters
Action
Mutation
API
依 FLUX 的理理論,實現VUEX 的單向資料流
包含非同步動作放在 Dispatch,其中有 Action 處理理 API
Store
Model
State
Getters
Action
Mutation
API
Model
State
Getters
Action
Mutation
依 FLUX 的理理論,實現VUEX 的單向資料流
包含非同步動作放在 Dispatch,其中有 Action 處理理 API
其中⼀一個 Model 的 Action 引⽤用 axios ⽤用來來處理理發送 API
再讓 Action 呼叫 Action
Store
Model
State
Action
ActionAPI
Model
State
Getters
Action
Mutation

More Related Content

More from Chris Wang

完美 camp 進化論
完美 camp 進化論完美 camp 進化論
完美 camp 進化論
Chris Wang
 
Dm create message old
Dm create message oldDm create message old
Dm create message old
Chris Wang
 
Dm create message new
Dm create message newDm create message new
Dm create message new
Chris Wang
 
用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI
Chris Wang
 
MVC Design in Web backend Server
MVC Design in Web backend ServerMVC Design in Web backend Server
MVC Design in Web backend Server
Chris Wang
 
Bug afx ini-line122
Bug afx ini-line122Bug afx ini-line122
Bug afx ini-line122
Chris Wang
 
物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉
Chris Wang
 
VC6 font setup tips
VC6 font setup tipsVC6 font setup tips
VC6 font setup tips
Chris Wang
 
MFC tips for single document
MFC tips for single documentMFC tips for single document
MFC tips for single document
Chris Wang
 
CString of MFC skills
CString of MFC skillsCString of MFC skills
CString of MFC skills
Chris Wang
 
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
Chris Wang
 
偷偷學習 Python3
偷偷學習 Python3偷偷學習 Python3
偷偷學習 Python3
Chris Wang
 
Information architecture reading ch7
Information architecture reading ch7Information architecture reading ch7
Information architecture reading ch7
Chris Wang
 
用Vue改dom
用Vue改dom用Vue改dom
用Vue改dom
Chris Wang
 
Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除
Chris Wang
 
如何寫好程式
如何寫好程式如何寫好程式
如何寫好程式
Chris Wang
 
迷路的浪漫
迷路的浪漫迷路的浪漫
迷路的浪漫
Chris Wang
 
Win32 api看視窗運作
Win32 api看視窗運作Win32 api看視窗運作
Win32 api看視窗運作
Chris Wang
 

More from Chris Wang (18)

完美 camp 進化論
完美 camp 進化論完美 camp 進化論
完美 camp 進化論
 
Dm create message old
Dm create message oldDm create message old
Dm create message old
 
Dm create message new
Dm create message newDm create message new
Dm create message new
 
用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI用 jenkins 實戰 CD/CI
用 jenkins 實戰 CD/CI
 
MVC Design in Web backend Server
MVC Design in Web backend ServerMVC Design in Web backend Server
MVC Design in Web backend Server
 
Bug afx ini-line122
Bug afx ini-line122Bug afx ini-line122
Bug afx ini-line122
 
物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉物件的值莫名奇妙被改掉
物件的值莫名奇妙被改掉
 
VC6 font setup tips
VC6 font setup tipsVC6 font setup tips
VC6 font setup tips
 
MFC tips for single document
MFC tips for single documentMFC tips for single document
MFC tips for single document
 
CString of MFC skills
CString of MFC skillsCString of MFC skills
CString of MFC skills
 
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
應用於液晶電視中動態背光調光技術之演算法與系統整合實現 論文口試投影片
 
偷偷學習 Python3
偷偷學習 Python3偷偷學習 Python3
偷偷學習 Python3
 
Information architecture reading ch7
Information architecture reading ch7Information architecture reading ch7
Information architecture reading ch7
 
用Vue改dom
用Vue改dom用Vue改dom
用Vue改dom
 
Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除Cppunit下載、編譯、使用與困難排除
Cppunit下載、編譯、使用與困難排除
 
如何寫好程式
如何寫好程式如何寫好程式
如何寫好程式
 
迷路的浪漫
迷路的浪漫迷路的浪漫
迷路的浪漫
 
Win32 api看視窗運作
Win32 api看視窗運作Win32 api看視窗運作
Win32 api看視窗運作
 

思考 Vuex 發送 API 的架構

  • 1. 從 FLUX 與 REDUX 思考 VUEX 架構 Chris 《Chris 技術筆記》 https://dwatow.github.io/
  • 2. 依 FLUX 的理理論,實現 REDUX 的單向資料流 包含非同步動作放在 Dispatch,其中有 middlewares 處理理 API
  • 3. 依 FLUX 的理理論,實現VUEX 的單向資料流 包含非同步動作放在 Dispatch,其中有 ?? 處理理 API View Store State Getters Action Mutation API
  • 4. 依 FLUX 的理理論,實現VUEX 的單向資料流 包含非同步動作放在 Dispatch,其中有 Action 處理理 API Store Model State Getters Action Mutation API Model State Getters Action Mutation
  • 5. 依 FLUX 的理理論,實現VUEX 的單向資料流 包含非同步動作放在 Dispatch,其中有 Action 處理理 API 其中⼀一個 Model 的 Action 引⽤用 axios ⽤用來來處理理發送 API 再讓 Action 呼叫 Action Store Model State Action ActionAPI Model State Getters Action Mutation