Vuex Mutation running, but component not updating until manual commit in vue dev tools

Question

I have a vue component that I can\'t get to update from a computed property that is populated from a service call.

Feed.vue

Answer 1

Hey for all the people coming to this and not being able to find a solution. The following was what worked for me:

Declaring base state:

state: {
  mainNavData: [],
}

Then I had my action which is calling the now fixed mutation:

actions : {
  async fetchMainNavData({ commit }) {
    var response = await axios.get();
    commit('setMainNavData', response));
  },
  
};

Now my mutation is calling this updateState() function which is key to it all

mutations = {
  setMainNavData(state, navData) {
    updateState(state, 'mainNavData', navData);
  },
};

This is what the updateState function is doing which solved my issues.

const updateState = (state, key, value) => {
  const newState = state;
  newState[key] = value;
};

After adding updateState() my data reactively showed up in the frontend and I didn't have to manually commit the data in Vue tools anymore.

please note my store is in a different file, so its a little bit different.

Hope this helps others!