Reactivity of Objects in Vuejs (vuex)

Question

I am making an application where I store the user profile data in the vuex store, and there is the option to update this data. the problem is that when I update via mutations as indicated, and saved, the data in the store updates, the component computed updates, but the component itself does not update, as seen in the image:

how I am recovering vuex data:

export default {
 data() {
  return {};
 },

 computed: {
  ...mapState(['AppActiveUser']),
  activeUserInfo() {
   return this.$store.getters.getUserActive;
  },
  getDisplayName() {
   return this.$store.getters.getDisplayName;
  }
 },
 methods: {
  logout() {
   this.$store.dispatch('auth/logout');
   // this.$router.push('/pages/login').catch(() => {});
  }
 }
};

how I’m treating Mutation in vuex:

  UPDATE_USER_INFO(state, payload) {
    // Get Data localStorage
    let userInfo =
      JSON.parse(localStorage.getItem('userInfo')) || state.AppActiveUser;

    for (const property of Object.keys(payload)) {
      if (payload[property] != null) {
        // If some of user property is null - user default property defined in state.AppActiveUser
        state.AppActiveUser[property] = payload[property];

        // Update key in localStorage
        userInfo[property] = payload[property];
      }
    }
    // Store data in localStorage
    localStorage.setItem('userInfo', JSON.stringify(userInfo));
  },

I am calling this Mutation in an action that launches the data to update on my server and later returns the update:

  async updateUserInfoSave({ commit }, payload) {
    try {
      // const { name, company, avatar, password } = payload;
      // console.log(payload);

      const accessToken = localStorage.getItem('accessToken');
      const { data: response } = await axios.put('/users', payload, {
        headers: {
          'Content-Type': `multipart/form-data; boundary=${payload._boundary}`,
          Authorization: `Baerer ${accessToken}`
        }
      });

      commit('UPDATE_USER_INFO', response);

      return response;
    } catch (error) {
      throw new Error(error);
    }
  }

Does anyone know what might be going on?

Answer 1

I went through problems like that too, I don’t know exactly why this is happening but vuex has a problem with reactivity when it is done nested, in case you are updating the property of an object within the state, not considering this reactive property.

To solve this problem I used the Vue.set in my mutations to ensure that authentication will always be updated in a reactive way.

In your case try to change your mutatation so it stays like this:

 for (const property of Object.keys(payload)) {
      if (payload[property] != null) {
        // If some of user property is null - user default property defined in state.AppActiveUser
        Vue.set(state.AppActiveUser,property,payload[property]);

        // Update key in localStorage
        userInfo[property] = payload[property];
      }
    }