-1

Estou fazendo uma aplicação onde guardo os dados de profile do usuário no store do vuex, e existe a opção de atualização desses dados. o problema é que quando faço a atualização via mutations como é indicado, e salvo, o dado no store atualiza, o computed do componente atualiza, porém o componente em si não atualiza, como percebe-se na image: inserir a descrição da imagem aqui

como eu estou recuperando os dados do vuex:

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(() => {});
  }
 }
};

como estou tratando a mutation no 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));
  },

Estou chamando esse mutation em uma action que lança os dados para atualização em meu servidor e posteriormente retorna a atualização:

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

Alguém sabe o que pode estar ocorrendo?

2
  • manda o html tb 8/10/2020 às 21:04
  • Eu observei que quando eu clico em commit all no Vue DevTools começa a atualizar normalmente.
    – Saulo Lins
    9/10/2020 às 0:35

1 Resposta 1

3

Eu passei por problemas assim também, eu não sei exatamente dizer porque isso aocntece mas o vuex tem um problema com reactividade quando é feito de forma aninhada, no caso você está atualizando a propriedade de um objeto dentro do state, não considerando essa propriedade reativa.

Para resolver esse problema eu usei o Vue.set nas minhas mutations para garantir que a auteração será atualizada sempre de forma reativa.

No seu caso tente alterar sua mutatation para que fique assim:

 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];
      }
    }
        
1
  • 1
    É quase isso irmão, o problema não está no aninhamento, mas, você precisa inicializar todas as propriedades do objeto que você quer que seja reativa, no state, se não ele não atualiza, ai o recurso do Vue.set() seria uma solução mais plausível
    – Saulo Lins
    9/10/2020 às 17:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .