I want my variable ( line : {{user.email}}to update when I send the form.

I created a form on my page so that a user can update their data. On the backend side everything works, I did the simulation with the Postman.

On the frontend, I work with vuejs and axios. I created a form with an input and a button to submit my update request. The new mail is registered in my database (mysql sequelize), however when I refresh the page there is no change. The token does not update unless I log out. I think the problem is that the token still contains the old mail before the user switch, so the information doesn't follow on the page.

How can I do a dynamic refresh so that my user.email variable gets updated?

<template>
 
 //component profile//
 <main>
    <div  v-if="user">
      <div >
        <div >
          <section >
            <div >
              <div >
                <div >
                  <div >
                    <p >Hello {{ user.firstname }} !</p>
                  </div>
                </div>

                <div >
                  <div >
                    <p>My email: {{ user.email }}</p>
                    <form >
                      <div >
                        <label  for="change-email"
                          >*Enter my new email*</label
                        >
                        <input
                          type="text"
                          v-model="email"
                        />
                      </div>
                      <div >
                        <div >
                          <button
                            
                            @click.prevent="modifyMyprofil"
                          >
                           Modify my account
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>

                <div >
                  <div >
                    <button  @click="deleteAccount">
                      Supprimer mon compte .
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import axios from "axios";
import VueJwtDecode from "vue-jwt-decode";

export default {
  name: "ProfilConnect",
  data() {
    return {
      user: {},
      email: "",
    };
  },

  mounted() {
    axios.get("http://localhost:3000/api/profil/", {
      headers: {
        Authorization: "Bearer, "   localStorage.getItem("token"),
      },
    });

    try {
      let token = localStorage.getItem("token");
      let decoded = VueJwtDecode.decode(token);
      this.user = decoded;
    } catch (error) {
      console.log(error, "error from decoding token");
    }
  },
  methods: {
    modifyMyprofil() {
      axios
        .put(
          "http://localhost:3000/api/profil/",
          { email: this.email },
          {
            headers: {
              Authorization: "Bearer, "   localStorage.getItem("token"),
            },
          }
        )
        .then((response) => {
      
          console.log("Status: ", response.status);
          console.log("Data: ", response.data);
          console.log("Email: ", this.email);
        })
        .catch((error) => {
          
          console.error("Something went wrong!", error);
        });
    },

    deleteAccount() {
      axios
        .delete("http://localhost:3000/api/profil/", {
          headers: {
            Authorization: "Bearer, "   localStorage.getItem("token"),
          },
        })

        .then((response) => {
          this.$store.dispatch("logout").then(() => {
            this.$router.push("/");
            console.log(response);
          });
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

// store/ vuex

export default createStore({
  state: {
    token: localStorage.getItem("token") || "",
    user: {}, 
  },

  getters: {
    isLoggedIn: (state) => !!state.token,
  },

  mutations: {
  

    auth_request(state) {
      state.status = "loading";
    },

    auth_success(state, token, user) {
      state.token = token;
      state.user = user;
    },

    auth_error(state) {
      state.status = "error";
    },
    logout(state) {
      state.status = "";
      state.token = "";
    },
  },

  actions: {
  

    submitLogin({ commit }, user) {
      return new Promise((resolve, reject) => {
        commit("auth_request");
        axios({
          url: "http://localhost:3000/api/auth/login",
          data: user,
          method: "POST",
        })
          .then((resp) => {
            const token = resp.data.token;
            const user = resp.data.user;
            localStorage.setItem("token", token);
            axios.defaults.headers.common["Authorization"] = "Bearer, "   token;
            commit("auth_success", token, user);
            resolve(resp);
          })
          .catch((err) => {
            commit("auth_error");
            localStorage.removeItem("token");
            reject(err);
          });
      });
    },

    logout({ commit }) {
      return new Promise((resolve, reject) => {
        commit("logout");
        localStorage.removeItem("token");
        delete axios.defaults.headers.common["Authorization"];
        resolve();
        reject();
      });
    },
  },
}); *

CodePudding user response：

In put response, you should update local state.

this.user.email = response.data.email