摘要 Vuex 使用的方式 摘要 專案結構下通常會有多個組件,組件內可能又有組件,組件之間的溝通,通常會用到 emit 和 props,emit 回來,在維護與開發會造成元件之間耦合度太高,本次介紹Vuex框架主要是將資料、處理邏輯集中化處理,視為網站的全域狀態管理,簡化vue元件之間溝通成本,我們主要介紹核心方法:state、getter、mutation、actions,這四個概念,在大型前端系統開發,利用vuex框架可以減少UI之間的資訊傳遞導致程式碼的複雜度。 單個組件的狀態非常好管理,但當遇到多個組件共享 state 時,單向數據流的簡潔性就很容易被破壞,主要解決下列應用場景,例如: 多個view依賴同一個state 來自不同view的actions需要變更同一個state vuex使用限制 只有 mutation 可以改變 state,action --> commit --> mutation action: 可以處理 非同步 的事件,再利用 commit 與 mutation 溝通 mutation: 在處理事件是 同步 的 vuex應用架構: 開發時需要使用架構 import Vue from 'vue' import Vuex from 'vuex' Vue . use ( Vuex ); export const store = new Vuex . Store ({ //共享物件資訊 state :{ }, //物件計算屬性 getters :{ }, //用來同步state的方法 mutations :{ }, //使用非同步呼叫 actions :{ } }); State(data) 響應式的資料狀...