Question

我想在调用确认方法时从ConfirmCode组件刷新Header.vue

当用户使用axios ajax登录时，我想刷新标题组件的li元素

Appointment.vue：

npm i

SendSMSModal.vue：

<send-sms-modal@clickClose="setShowModal"
   @clickSend="hideModal"
   @clickConfirm="showStep=true"
   :step="true"
   :showRegister="showRegister"></send-sms-modal>

ConfirmCode.vue：

<confirm-code :mobile="mobileClone"
:user_id="userId" @clickConfirm="clickConfirm" 
:step="step"></confirm-code>
<script>
clickConfirm() {
     this.$emit('clickConfirm');
}
</script>

Header.vue：

<button @click="confirm">
      Confirm
</button>
<script>
confirm() {
  axios.post('/api/confirm_code', {
      confirm_code: this.code,
      user_id: this.user_id}).then(function (response) {
        if (response.data.status == true) {
         window.localStorage.setItem('user', response.data.user);
            this.$emit('clickConfirm');
         }}.bind(this)).catch(function (error) {
          this.errors = error.response.data.errors;
       }.bind(this));
}
</script>

Answer 1

我建议您看看vuex。

使用vuex，您可以创建一个存储用户信息的商店。然后，您可以全局访问和设置用户。

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const state = {
  user: window.localStorage.getItem("user")
};

const mutations = {
  SET_USER(state, user) {
    state.user = user;
    window.localStorage.setItem("user", user);
  }
};

const actions = {
  SetUser({ commit }, user) {
    commit("SET_USER", user);
  }
};

const getters = {
  user(state) {
    return state.user;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

然后使用这样的商店：

<template>
  <div id="app">
    <h1 v-if="user">Hello {{user}}</h1>
    <button @click="SetUser('John')">Set User</button>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "App",
  methods: {
    ...mapActions(["SetUser"])
  },
  computed: {
    ...mapGetters(["user"])
  }
};
</script>

您还需要像这样注册商店：

import Vue from "vue";
import App from "./App";
import store from "./store";

new Vue({
  el: "#app",
  store,
  components: { App },
  template: "<App/>"
});

我创建了一个商店的示例，其中将用户保留在localStorage中 https://codesandbox.io/s/vuex-store-example-39icr?module=%2Fsrc%2Fstore.js

从另一个组件重新渲染组件的一部分

1 个答案: