Vuex與狀態管理

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

【Why】: 為什麼需要Vuex ?

【What】 : 什麼是Vuex

* Vuex 特性

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

* Vuex『單向數據流』

1. 畫面觸發事件（View）
2. emit (Actions) 修改資料
3. 包括修改 props所傳遞的資料（State）
4. 更新畫面 （View）

* Vue 工作流程

this.$store.dispatch('Logout',self.userToken);

* Vuex 架構

state: {
    類似data,管理資料
},
actions:{

    負責觸發 mutations,主要處理非同步行為 ex: 打 API
    // 登出
    Logout({commit}){
    commit("CLEAR_USER_DATA");
    router.push('/');
    }
},
mutations: {
    
    負責修改 store 資料,主要處理同步行為
    CLEAR_USER_DATA(){
      localStorage.removeItem("Authorization");
    }

},

}; 

state:{

},
actions:{

},
mutations: {

},
getters：{
    store 的計算屬性
    取得資料。也可以像 computed 一樣，自定義運算處理資料。
},
modules：{
    按專案功能需求，分拆為不同 module。
    每個 module 裏都有自己的 state、actions、mutations、getters，也可以設定巢狀 modules。
}

【How】 : Vuex 語法

1. 元件取得Vuex 資料

this.$store

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

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

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