Vuex與狀態管理
2022/03/21閱讀時間約 3 分鐘
Vuex 像一個公用容器管理所有資料，作為整個網站全域狀態管理，將狀態集中 Store 管理。
【Why】: 為什麼需要Vuex ?
Vue 用組件溝通方式；都是利用父子元件溝通，透過props 、emit 。
那如果不是父子關係，要如何溝通呢？ Vuex 專為 Vue.js 應用程序 狀態管理模式，採集中式存儲管理應用的所有組件狀態．
【What】 : 什麼是Vuex
* Vuex 特性
- 資料存在專案裡，隱私好。
- 專案全域狀態
- 重新整理資料會不見
* Vuex『單向數據流』
- 畫面觸發事件（View）
- emit (Actions) 修改資料
- 包括修改 props所傳遞的資料（State）
- 更新畫面 （View）
* Vue 工作流程
1.component 元件 觸發 actions
this.$store.dispatch('Logout',self.userToken);2.action 透過commit 觸發 mutations
3.mutations 執行邏輯運算，改變store 狀態
4.當store狀態被改變時，觸發Render渲染元件
5.透過Vue.js devtools觀察其變化
3.mutations 執行邏輯運算，改變store 狀態
4.當store狀態被改變時，觸發Render渲染元件
5.透過Vue.js devtools觀察其變化
* Vuex 架構
1.action → commit → mutation
(非同步)Actions（觸發 mutations）=> 改變資料狀態
(同步)Mutations（修改 states）=> 實際操作狀態
(同步)Mutations（修改 states）=> 實際操作狀態
state: {
類似data,管理資料
},
actions:{
負責觸發 mutations,主要處理非同步行為 ex: 打 API
// 登出
Logout({commit}){
commit("CLEAR_USER_DATA");
router.push('/');
}
},
mutations: {
負責修改 store 資料,主要處理同步行為
CLEAR_USER_DATA(){
localStorage.removeItem("Authorization");
}
},
}; 2. Vuex提供了分割模組
狀態全部集中到同一個Store，避免變得複雜。
state:{
},
actions:{
},
mutations: {
},
getters：{
store 的計算屬性
取得資料。也可以像 computed 一樣，自定義運算處理資料。
},
modules：{
按專案功能需求，分拆為不同 module。
每個 module 裏都有自己的 state、actions、mutations、getters，也可以設定巢狀 modules。
}【How】 : Vuex 語法
- 元件取得Vuex 資料
this.$store
2. 觸發 Vuex actions
this.$store.dispatch('Logout',傳遞資料);3. mapGetters
一口氣將多筆狀態引入進來。
引入 store 的各種屬性到元件裏使用。
computed: {
...mapGetters({ allTodos: 'getTodos' })
}等於下面寫法
computed: {
...mapGetters(['getTodos']),
allTodos() {
return this.getTodos;
}
}
留言0
查看全部