Vuex與狀態管理

Vuex 像一個公用容器管理所有資料，作為整個網站全域狀態管理，將狀態集中 Store 管理。

【Why】: 為什麼需要Vuex ?

Vue 用組件溝通方式；都是利用父子元件溝通，透過props 、emit 。

那如果不是父子關係，要如何溝通呢？ Vuex 專為 Vue.js 應用程序 狀態管理模式，採集中式存儲管理應用的所有組件狀態．

【What】 : 什麼是Vuex

* Vuex 特性

1. 資料存在專案裡，隱私好。
2. 專案全域狀態
3. 重新整理資料會不見

* Vuex『單向數據流』

1. 畫面觸發事件（View）
2. emit (Actions) 修改資料
3. 包括修改 props所傳遞的資料（State）
4. 更新畫面 （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觀察其變化

* Vuex 架構

1.action → commit → mutation

(非同步)Actions（觸發 mutations）=> 改變資料狀態
(同步)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 語法

1. 元件取得Vuex 資料

this.$store

2. 觸發 Vuex actions

this.$store.dispatch('Logout',傳遞資料);

3. mapGetters

一口氣將多筆狀態引入進來。

引入 store 的各種屬性到元件裏使用。

computed: {
    ...mapGetters({ allTodos: 'getTodos' })
}

等於下面寫法

computed: {
    ...mapGetters(['getTodos']),
    allTodos() {
      return this.getTodos;
    }
}