计算值在状态第一次变化后停止反应答案

【问题标题】：Computed value stops reacting after the first change in the state计算值在状态第一次变化后停止反应
【发布时间】：2021-01-24 12:42:13
【问题描述】：

在我的组件中，我有 showTrigger 计算属性和 saveDataToStore 进行更新的方法。

computed: {
  showTrigger() {
    if (typeof store.getters["applicationBuilder/getTriggerById"](this.id) === "undefined") {
      return false;
    }
    return store.getters["applicationBuilder/getTriggerById"](this.id).show;
  }
},
methods: {
  saveDataToStore(info) {
    const trigger = {
      id: this.id,
      type: this.selected.type,
      info: info,
      show: false
    };
    store.dispatch('applicationBuilder/updateTriggerById', trigger);
  }
}

我的商店文件：

const state = {
  triggers: []
};

const getters = {
  getTriggerById: (state) => (id) => {
    return state.triggers.find(trigger => trigger.id === id)
  }
};

const actions = {
  updateTriggerById({commit}, payload) {
    commit('mutateTriggerById', payload);
  }
};

const mutatations = {
  mutateTriggerById(state, payload) {
    let index = state.triggers.findIndex(trigger => trigger.id === payload.id)
    state.triggers[index].id = payload.id;
    if (typeof payload.type !== "undefined") {
      state.triggers[index].type = payload.type;
    }
    if (typeof payload.info !== "undefined") {
      state.triggers[index].info = payload.info;
    }
    if (typeof payload.show !== "undefined") {
      state.triggers[index].show = payload.show;
    }
  }
};

当我最初在数组 showTrigger 中设置元素时，会获取更改。但是，每次对 trigger 数组的 show 属性的下一次更改都不会触发 get 计算值。

我是否必须更改启动阵列的方式。当我在这样的状态下为数组设置默认值时，它没有帮助：

triggers: [
  {
    id: null, 
    show: false, 
    info: {}, 
    type: null
  }
],

我做错了什么？

【问题讨论】：

可能与 Vue.js 2 vuejs.org/v2/guide/reactivity.html 中的反应性警告有关。展示如何在triggers中添加、替换和删除元素

标签： vue.js vuejs2 vuex store

【解决方案1】：

在测试您的代码后，我认为在第一时间更改mutation 以添加payload 即可解决问题，并且computed 属性每次都开始更新：

const mutations = {
  mutateTriggerById(state, payload) {
    let index = state.triggers.findIndex(
      (trigger) => trigger.id === payload.id
    );
    if(state.triggers[index]) {
      state.triggers[index].id = payload.id;
      if (typeof payload.type !== "undefined") {
        state.triggers[index].type = payload.type;
      }
      if (typeof payload.info !== "undefined") {
        state.triggers[index].info = payload.info;
      }
      if (typeof payload.show !== "undefined") {
        state.triggers[index].show = payload.show;
      }
    }else{
      state.triggers.push(payload);
    }
  }
};

【讨论】：