如何使用 axios (put) 更新变量？我的函数不更新模板

Question

我希望我的变量（行：{{user.email}}在我发送表单时更新。

我在我的页面上创建了一个表单，以便用户可以更新他们的数据。在后端一切正常，我用 Postman 进行了模拟。

在前端，我使用 vuejs 和 axios。我创建了一个带有输入和按钮的表单来提交我的更新请求。新邮件已在我的数据库中注册（mysql sequelize），但是当我刷新页面时没有任何变化。除非我注销，否则令牌不会更新。我认为问题是令牌仍然包含用户切换之前的旧邮件，因此页面上没有跟随信息。

如何进行动态刷新以便更新我的 user.email 变量？

<template>
 
 //component profile//
 <main>
    <div class="container mt-4" v-if="user">
      <div class="row justify-content-center">
        <div class="col">
          <section class="row">
            <div class="col">
              <div class="card color-bg my-3">
                <div class="card-header">
                  <div class="row justify-content-around">
                    <p class="m-1">Hello {{ user.firstname }} !</p>
                  </div>
                </div>

                <div class="card text-center">
                  <div class="text-center">
                    <p>My email: {{ user.email }}</p>
                    <form class="background-style">
                      <div class="form-group">
                        <label class="font-weight-bold" for="change-email"
                          >*Enter my new email*</label
                        >
                        <input
                          type="text"
                          v-model="email"
                        />
                      </div>
                      <div class="form-group">
                        <div class="btn rounded p-1">
                          <button
                            class="rounded p-2"
                            @click.prevent="modifyMyprofil"
                          >
                           Modify my account
                          </button>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>

                <div class="card-body mx-auto">
                  <div class="btn-danger rounded p-1">
                    <button class="rounded p-2" @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();
      });
    },
  },
}); *

Answer 1

在 put 响应中，您应该更新本地状态。

this.user.email = response.data.email

如何使用 axios (put) 更新变量？我的函数不更新模板

How can I update variables with axios (put) ? my function does not update the template

javascript

variables

input

put

vue.js