Перерисовка части компонента из другого компонента - PullRequest
Новая
       2

Перерисовка части компонента из другого компонента

1 голос
/ 27 октября 2019

Я хочу обновить Header.vue из компонента ConfirmCode при вызове метода подтверждения

Я хочу обновить элемент li компонента заголовка при входе пользователя в систему с помощью axios ajax

Appointment.vue: 

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

SendSMSModal.vue: 

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

ConfirmCode.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>

Header.vue: 

<li>
      <a v-if="user" href="">
             User profile
      </a>
      <a v-else @click="setShowModal"
        href="javascript:void(0)" class="">
         <span>
              Login
        </span>
     </a>
</li>
<script>
mounted() {
   this.user = window.localStorage.getItem('user');
 }
</script>

1 Ответ

2 голосов
/ 27 октября 2019

Я бы посоветовал вам взглянуть на 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

...