mutation響應規則

前言

​ 我們都知道，Vuex的store中的state是響應式的，當state中的資料發生改變時，Vue元件會自動更新。但是是不是任何情況都會自動更新的呢？顯示不是的。那什麼情況下才能響應呢，那我們的先知道它響應的原理。

響應原理

​ 當我們在state裡添加屬性時，都會被添加到響應式系統中，響應式系統會監聽屬性的變化，當屬性發生變化時，會通知所有頁面中用到該屬性的地方，讓界面發生重新整理。後添加的屬性由于之前沒有在store裡初始化，我們就無法監聽該屬性，界面不能重新整理。

響應規則

這就要求我們必須遵守一些Vuex對應的規則:

• 提前在store中初始化好所需的屬性.

分析

：在store中的state裡的info中添加好這些屬性（name，age，height等），如果添加屬性，則無法即時響應，因為無法監聽沒有被實作設定好的屬性。

• 當給state中的對象添加新屬性時, 使用下面的方式:
  • 方式一: 使用Vue.set(obj, ‘newProp’, 123)

  updateInfo(state) { 
        //state.info.name='lisi'
        //添加新的屬性,添加一個address屬性
        Vue.set(state.info, 'address','beijing');
       //删除一個屬性
        Vue.delete(state.info, 'age');
      
  }
             

  • 方式二: 用心對象給舊對象重新指派

  

分析

：info對象被重新指派，info=info+新的一個屬性。

...拓展符

将對象拆成序列拼接上新屬性,在用字面符包裝成對象複制給info。