爲管理複雜組件狀態困擾？試試 vue 簡單狀態管理 Store 模式

時間 2019-11-06

標籤管理複雜組件狀態困擾試試 vue 簡單 store 模式简体版

原文原文鏈接

在 vue 中，通訊有幾種形式：html

父子組件 emit/on
vuex 中共享 state
跨組件 EventBus

文檔中的提到的 Store 模式卻鮮有人去使用討論。筆者在研究 ElementUI的Table組件的代碼組織方式，以及在本身 ElementUI 表單編輯項目中實踐以後以爲其在複雜組件組織上很是有用，是一個被忽視的組件通訊方法。vue

簡單狀態管理 store 模式

官方示例代碼：git

var store = {
  debug: true,
  state: {
    message: 'Hello!'
  },
  setMessageAction(newValue) {
    if (this.debug) console.log('setMessageAction triggered with', newValue)
    this.state.message = newValue
  },
  clearMessageAction() {
    if (this.debug) console.log('clearMessageAction triggered')
    this.state.message = ''
  }
}
複製代碼

官方介紹：全部 store 中 state 的改變，都放置在 store 自身的 action 中去管理。這種集中式狀態管理可以被更容易地理解哪一種類型的 mutation 將會發生，以及它們是如何被觸發。當錯誤出現時，咱們如今也會有一個 log 記錄 bug 以前發生了什麼。此外，每一個實例/組件仍然能夠擁有和管理本身的私有狀態github

官方版的介紹過於簡陋，不妨咱們更進一步，學習一下 ElementUI 的 Table 組件是如何用 Store 組織一個複雜組件的vuex

爲何須要 Store 模式

ElementUI 的 Table 組件，功能不少。該組件由父組件 Table.vue 和衆多子組件 layout-observer，table-body，table-column，table-footer,table-header，table-layout 組成。看 ElementUI 文檔就以爲 Table 組件複雜。數據結構

若是把子組件的事件都 emit 到父組件處理，那麼父組件得接收多少事件。而且子組件部分功能會影響父組件的佈局。而且 Table 的部分數據大多數子組件都須要，你要一個一個經過 Porp 傳入嗎？自頂向下的數據流動開發困難。不如把這些共享的數據放在一個地方,咱們天然很容易想到 Vuex，可是 ElementUI 庫引入 ElementUI 引入 Vuex，你以爲合適嗎，而且數據共享僅僅是在 Table 組件裏面，並非全局的數據，所以採用 Store 模式再好不過了。架構

ElementUI 模仿了 Vuex 的使用方式。有興趣的讀者能夠看一下 Table 組件中table-store.jsapp

模仿 Vuex 的一個好處就是我後期若是項目大了，能夠十分平滑的引入 Vuex，而且若是你熟悉 Vuex，使用 Store 模式沒有任何認知成本異步

實踐

筆者用 Store 模式改造了我以前的ElementUI 的表單在線編輯器，以前的主頁面由表單元素資源區，表單屬性編輯區，表單元素拖拽區，表單元素屬性編輯區，JSON表單生成區，代碼生成區。然而整個頁面就維護表單對象，表單元素列表，表單元素屬性這幾個值，然而這些值在多個子組件裏面都起了必定的做用，一開始沒有集中處理，致使數據會意外變化，不知道是那個組件引發的。後使用Store模式集中處理以後，代碼邏輯清楚不少編輯器

這種方式其實就是把數據管理，數據更新的功能交給了 Store。若是你熟悉 Vuex 的話，應該很快能理解我在說什麼

經過定義和隔離狀態管理中的各類概念並經過強制規則維持視圖和狀態間的獨立性，咱們的代碼將會變得更結構化且易維護

聲明一個 Store 對象

const FormStore = function(form, initialState = {}) {
   // 將父組件的示例保存在Store裏面
  if (!form) {
    throw new Error('Form is required.')
  }
  this.form = form

  this.states = { ... }
  // initialState 裏面的值必須是 this.states聲明過的，這樣全部狀態的變化應該都在store裏面能夠查找，並由store控制
  for (let prop in initialState) {
    if (initialState.hasOwnProperty(prop) && this.states.hasOwnProperty(prop)) {
      this.states[prop] = initialState[prop]
    }
  }
}
複製代碼

mutations

Vuex 中的 mutation 很是相似於事件：每一個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數

咱們這裏也模仿它，注意這裏咱們只放同步的代碼，異步代碼本身處理

FormStore.prototype.mutations = {
  setFormAttribute(states, formAttribute) {
    this.states = { ...states, formAttribute }
  },
  setFormItems(states, formItems) {
    this.states = { ...states, formItems }
  },
  setClickedIndex(states, clickedIndex) {
    this.states = { ...states, clickedIndex }
  },
  setFormItemToHandle(states, formItemToHandle) {
    this.states = { ...states, formItemToHandle }
  },
  setItemInFormItems(states, idx, formItem) {
    states.formItems.splice(idx, 1, formItem)
  },
  setFromItems(states, formItems) {
    this.states = { ...states, formItems }
  }
}
複製代碼

commit

複雜數據結構的父子組件的數據通訊用emit和v-on事件流容易混亂，尤爲是對象嵌套對象的時候。採用 Store 模式，子組件和父組件之間有了 store 這個橋樑，經過 commit 來分發事件

在 commit 函數裏面，打上一個console.log，事件的變化所有掌握在你的手裏。就像使用 Vuex 同樣

// 定義
FormStore.prototype.commit = function(name, ...args) {
  const mutations = this.mutations
  console.log('emit', name)
  if (mutations[name]) {
    // states 做爲第一個參數
    mutations[name].apply(this, [this.states].concat(args))
  } else {
    throw new Error(`Action not found: ${name}`)
  }
}
// 分發事件
this.store.commit('setFormItemToHandle', val)
複製代碼

使用

在父組件的 data 裏面建立 store，而後把 store 傳入到各個子組件裏面去。代碼邏輯很是清楚

data() {
    const store = new FormStore(this);
    return {
      store
    };
},
computed: {
    form() {
      return this.store.states.formAttribute;
    }
},
methods: {
    genFormItem(val) {
        this.store.commit("setFormItemToHandle", val);
      }
    }
}
複製代碼