Vue:js Vuex存储已更新,但组件面板中的组件未更新

时间:2019-06-13 16:03:11

标签: javascript vue.js

即使vuex存储已更新,也未更新组件,请尝试使用to计算。

store.js

 const actions = {
      addToInProgress: ({ commit, state }, incidentId) => {
        commit(Type.ADD_TO_PROGRESS, incidentId);
      },
  };

 const mutations = {    
     [Type.ADD_TO_PROGRESS]: (state, incidentId) => {
        const someArray = [...state.incidentArray];
        console.log("incidentId: to be progressed from mutation", incidentId);
        const incidentObj = someArray.find(i => i._id === incidentId);
        // state.incidentArray.filter(i => i.props.status === "new");

        incidentObj.props.status = "inProgress";
        console.log("incidentObj found to be in progress:", incidentObj, "and incident arrray:", someArray);
        Object.assign(state, { incidentArray: someArray });
    },
 };

const getters = {
    incidentsNew: (state) => { return state.incidentArray.filter(i => i.props.status === "new"); },
    incidentsInProgress: (state) => { return state.incidentArray.filter(i => i.props.status === "inProgress"); },
    incidentsResolved: (state) => { return state.incidentArray.filter(i => i.props.status === "resolved"); },
    incidentTypeConfig: (state) => { return state.incidentTypeConfig; }
};

component.js

//  here I am using computed but also incidents is not updating in the component
computed: {
    ...mapGetters({
        incidentsPending: "incident/incidentsNew",
        incidentsInProgress: "incident/incidentsInProgress",
        incidentsResolved: "incident/incidentsResolved"

    }),

0 个答案:

没有答案