Vuex01 簡單狀態管理

Vue中對原始數據對象的訪問，只是簡單的代理訪問（也就是引用了同一個地址的數據），所以當一份數據被多個實例共享，不必維護多份數據，只需要維護一份即可。

但是這會帶來調試上無法辨別何人何時改變過數據的問題，爲了解決這個問題，可以引入store模式

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 = ''
  }
}

注意，改變stroe中state的行爲方法，都應放在store中的action進行統一管理。

這時，每個實例、組件都可以同時擁有來自組件的共享狀態和來自自身的私有狀態

var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

重要的是，注意你不應該在action中替換原始的狀態對象 - 組件和store需要引用同一個共享對象，mutation才能夠被觀察

所以一個重要的約定就是：

組件不允許直接修改屬於store實例的state，而應該執行action來分發（dispatch）事件通知store去改變

回想起在Exam項目中，使用MOBX，完全違反了這個規定。什麼都不懂，亂七八糟的代碼就上線了

參考

• 狀態管理@Vue