從 flux 的概念來理解 vuex 的使用心法

1. FLUX VUEX
從 flux 理理解 vuex
Chris

2. I AM CHRIS
好想⼯工作室
Web camp hoster
Front-end Engineer
HTML + CSS + JS
Vue + Webpack
Software Engineer
C++, Cppunit, Jenkins

3. 資料
畫⾯面
資料
畫⾯面
資料
畫⾯面
資料
畫⾯面
畫⾯面
畫⾯面

4. FLUX
https://github.com/facebook/flux

5. FLUX
• Dispatcher
• 整個 application 唯⼀一的⼀一個 (singleton)
• Store 向 Dispatcher 註冊通知變更更
• Action 透過 Dispatcher 更更新 Store
• Store
• 每個 application 可擁有多個 store
• 資料中⼼心
• 透過 action 呼叫 mutate 更更改 store 的 data
• no public setter, only getter
• 資料改變發⽣生在 'change' event

6. FLUX
• Action
• 定義內部 API
• 動作中⼼心
• 任何與 application 的互動⽅方式
• 語意化命名⾏行行為
• View (圖上是 ReactViews)
• Data 從 Store 拿出來來顯⽰示
• View 必須訂閱 store 的 change 事件
• Action 也是由View 與使⽤用者⼾戶動⽽而觸發的

7. VUEX
https://github.com/vuejs/vuex

8. VUEX
• Store
• Getter
• Mutation
• Actions

9. VUEX
• Store
• Getter
• Store 的 Getter
• Mutation
• Store 的 Setter
• Actions
• 所有的邏輯都在這
• 可以共⽤用，互相呼叫
• 以非同步⽅方式呼叫(Promise)
• 呼叫 Getter 和 Mutation 對 Store 進⾏行行取值與
賦值

10. 某種 MVC 架構的味道...
換⼀一種畫法
Action
StoreComponents
Getter
State
Mutation
Getter
Mutation
Trigger

11. Render
Router
前端 後端
HTML+CSS
DomTree DataBase

12. 前端 後端
DomTree
JSON
Render
Router
DataBase
Router