如何更新Vuex中的getters数据实现动态表单的增删行操作

1. 更新store.js 新增操作mutation #

Vuex规定所有状态修改必须通过mutation提交，因此先新增两个处理applied数组增删的mutation：

state: {
  proyek:[]
},
getters: {
  dataPro: (state) => (id) => {
    return state.proyek.find(p => p.id == id);
  }
},
mutations: {
  SET_PRO(state,response){
    state.proyek = response.data;
  },
  // 新增applied行
  ADD_APPLIED_ITEM(state, { proId, item }) {
    const targetPro = state.proyek.find(p => p.id === proId)
    if (targetPro) {
      targetPro.applied.push(item)
    }
  },
  // 删除指定applied行
  DELETE_APPLIED_ITEM(state, { proId, index }) {
    const targetPro = state.proyek.find(p => p.id === proId)
    if (targetPro) {
      targetPro.applied.splice(index, 1)
    }
  }
},
actions: {
  async GetDataPro({ commit }) {
    commit("SET_PRO", dataJSON);
  },
}

2. 修正组件代码实现业务逻辑 #

首先修正原计算属性的语法错误，再调整增删方法调用mutation：

computed: {
  // 修正原计算属性的错误写法
  getState() {
    return this.$store.getters["dataPro"](this.id)
  }
},
methods: {
  deleteitem(row) {
    // 提交mutation删除指定行，传入当前项目id和要删除的索引
    this.$store.commit('DELETE_APPLIED_ITEM', {
      proId: this.id,
      index: row
    })
  },
  addNewRow() {
    // 提交mutation新增空行
    this.$store.commit('ADD_APPLIED_ITEM', {
      proId: this.id,
      item: {
        item_name : '',
        item_value: '',
      }
    })
  },
}

3. 可选优化（适配Vuex严格模式） #

如果开启了Vuex严格模式，直接v-model绑定state内的属性会触发报错，可将input的绑定拆成属性绑定+事件触发的形式：

<input 
  type="text" 
  :name="'item ' + row"  
  :value="applied.item_name"
  @input="updateItem(row, 'item_name', $event.target.value)"
>

新增对应修改字段的mutation和组件方法即可完成合规的状态修改。

内容的提问来源于stack exchange，提问作者Jon