计算值在状态第一次改变后停止反应

Question

在我的组件中，我有 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 属性的每次更改都不会触发计算值中的获取。

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

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

我做错了什么？

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

计算值在状态第一次改变后停止反应

Computed value stops reacting after the first change in the state

store

vue.js

vuex

vuejs2