Vuex與狀態管理

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

【Why】: 為什麼需要Vuex ?

【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

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

computed: {

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

}

computed: {

    ...mapGetters(['getTodos']),

    allTodos() {

      return this.getTodos;

    }

}