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)
  }
}