Vuex 在 store 中更新數組後視圖層不更新的問題

由於 js 的限制，Vue 無法進行監聽數組的修改，因此在 Vuex 中，下面三種情況 store 中的數據已經變化了，但視圖層不會更新：

• 使用索引更新數組的值時
• 修改數組的長度時
• 直接給對象數組中的對象賦值新屬性時

解決方式：使用 Vue.set ( target, key, value )

import Vue from 'vue';

export const mutations = {

  add(state, data) {
    state.powerList.push({
      id: data.id,
      power: data.power
    })
  },
  
  remove(state, data) {
    state.powerList.splice(state.powerList.findIndex((item) => item.id === data.id), 1)
  },
  
  update(state, data) {
  //使用Vue.set()
    Vue.set(state.powerList.find((item) => item.id === data.id), 'power', data.power)
  }
}