![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/5788677/Vue.png)
所以我說那個Vuex呢?
Vuex專案架構經驗分享
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6564994/e2079382.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6565006/e2079382.jpg)
前情提要
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6565654/chart.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/5788697/user.png)
成智遠 Mike
Senior Frontend Engineer
台北前端社群 版主
致理科技大學 RWD 業師
Hiskio、Yotta、Hahow 線上平台講師
飛肯設計學苑 講師
What is vuex?
Why use vuex?
How to use vuex?
什麼是vuex?
為什麼要用vuex?
vuex要怎麼使用?
Do I need vuex?
我需要vuex嗎?
- Vue 應用程式的狀態管理
- 單向資料流
What is vuex?
什麼是vuex?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/5952724/1485575347_47001.png)
Why use vuex?
為什麼要用vuex?
組件之間的溝通會讓你崩潰
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6523190/工作區域_1-100.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6523192/1.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6523205/工作區域_2-100.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6523209/2.png)
用Vuex可以更容易的控管你的資料流
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6523205/工作區域_2-100.jpg)
How to use vuex?
vuex要怎麼使用?
State
簡單說就是放你所有狀態的倉庫
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6532002/工作區域_3-8.png)
this.$store.state.count
state:{ count:1 }
Render
computed: { ...mapState({ 'count', }), localComputed() { return "vuex state" } }
computed: mapState([ 'count' ])
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6532119/工作區域_4-8.png)
Actions
當需要修改state的資料的時候,要發出一個命令( actions )去讓 mutation修改,而不是直接去修改state
Dispatch
actions: {
increment ({commit}) {
// commit
}
}
this.$store.dispatch('increment')
methods: { ...mapActions([ 'increment', ]), }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6532314/工作區域_5-8.png)
actions: {
increment ({commit}) {
commit('setIncrement')
}
}
Mutations
修改 state 資料的唯一方法就是透過actions (命令) mutation去修改!
mutations: {
setIncrement (state) {
state.count++
}
}
commit
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6546550/vuex.png)
Getter
有時候可能需要從state取得狀態然後過濾且計算狀態
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6546550/vuex.png)
state: { user: [ { id: 1, name: 'Mike', state: true }, { id: 2, name: 'Kuro', state: false } ] }
getters: { userState: state => { return state.user.filter(user => user.state) } }
this.$store.getter.userState
computed: { ...mapGetters([ 'userState', ]) }
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6546600/vuex.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6546613/actios.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6546616/tenor.gif)
那 Veux 跟 API 之間的互動呢?
我們可以在Actions來處理!!!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6546678/API.png)
actions: { getWeatherData ({ commit }){ axios.get("/api?id=123") .then(res=> { commit("setWeatherData", res.data); }) .catch(error=> { //處理error的方法 handErrorDeal(error); }) } }
使用 axios 來做為非同步處理的工具
Vuex + axios
專案資料流架構經驗分享
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6565033/vuex.png)
我們會需要用到的幾個 Axios API
axios.create
axios.interceptors.request
axios.interceptors.response
axios.get
axios.post
攔截 API request 的請求
axios.interceptors.request.use(request=> {
request.headers['Authorization'] = "123";
return request;
}, error=> {
return Promise.reject(error);
});
攔截 API response 的回傳
axios.interceptors.response.use(response => {
return Promise.resolve(response);
}, error => {
return Promise.reject(error.response.data);
})
async / await + try catch
async getWeatherData ({ commit, dispatch }){
try {
const res = await apiGetWeatherData();
commit('weatherData', res.data);
} catch (error) {
dispatch('goBackError', true);
}
},
module.exports = {
devServer: {
proxy: 'https://works.ioa.tw/'
}
}
vue.config.js
處理跨網域問題 proxy server
Do I need vuex?
我需要vuex嗎?
自己判斷 !
# QA時間
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6565086/963657-XXL.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6565093/Screenshot_1.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6565095/YouTube.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/5929454/Screenshot_3.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/5929455/Screenshot_4.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/5929456/Screenshot_5.jpg)
# 工商時間
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/5952827/螢幕快照_2019-03-28_下午11.25.37.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/5952830/螢幕快照_2019-03-28_下午11.25.26.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/1005115/images/6565083/e2079382222.jpg)
所以我說那個Vuex呢?
By mikecheng1208
所以我說那個Vuex呢?
- 1,690