Блог

как сделать v-if при рендеринге в другой компонент для быстрого рендеринга? у меня есть некоторый случай, когда я собираюсь войти в систему, и после успешного завершения мое nabvar component действие изменится после его завершения, я должен вручную перезагрузить его на своем клиенте, чтобы получить logout button , и то же самое происходит и при удалении, я должен вручную перезагрузить то, что я уже поставил :key на этот компонент

вот мой компонент на моей странице login.vue

 goLogin() {
    if (!this.input || !this.password) {
      this.$swal.fire({
        type: 'error',
        text: `please enter your email/username and password`,
      });
    } else {
      const client = {
        input: this.input,
        password: this.password,
      };
      this.$axios
        .post('/api/user/login', client)
        .then(({
          data
        }) => {
          localStorage.setItem('token', data.token);
          // vm.$forceUpdate();
          localStorage.setItem('role', data.tryingLogin.role);
          this.$swal.fire({
            type: 'success',
            text: `successfully login`,
          });
          if (data.tryingLogin.role === 'admin') {
            this.$router.replace({
              path: '/admin'
            });
          } else {
            this.$router.push({
              path: '/'
            });
          }
        })
        .catch(err => {
          this.$swal.fire({
            type: 'error',
            text: err.response.data.error,
          });
        });
    }  

и в моем компоненте Header.vue у меня есть isLogin реквизиты, и я проверяю, закрываю ли localStorage.GetItem («токен») кнопку входа и регистрации navbar header.vue , и она должна показывать кнопку выхода, если у клиента есть токен, но его не было, после успешного входа в систему я должен перезагрузить его, чтобы получитькнопка logout showing

как заставить его быстро меняться? чтобы поменять местами показывать и скрывать кнопки входа и выхода из системы??

я также создаю реквизиты для проверки входа в систему на моем App.vue , и я использую все хуки постоянно, чтобы поменять местами кнопку входа и выхода из системы, это вообще не изменилось, 🙁

и это происходит, когда я также удаляю свой список, я должен перезагрузить его: (надеюсь, вы, ребята, могли бы дать мне некоторую помощь и подсказку для решения этой проблемы: D

Для совместного использования состояния между различными компонентами лучшим выбором было бы использовать библиотеку управления состоянием, такую как Vuex: https://vuex.vuejs.org

Вы создаете хранилище, в котором хранится информация о том, зарегистрирован пользователь или нет:

 const store = new Vuex.Store({
  state: {
    isLoggedIn: false
  },
  mutations: {
    TOGGLE_LOGIN_STATUS: (state) => {
      state.isLoggedIn = !state.isLoggedIn;
    }
  }
})
  

При успешном входе в систему вы меняете isLoggedIn флаг:

 store.commit('TOGGLE_LOGIN_STATUS');
  

И вы можете получить этот статус из хранилища в любом из ваших компонентов (он также реактивный, поэтому изменения отражаются во всех ваших компонентах) — это должно быть computed свойство:

 computed: {
  isLoggedIn() { return store.state.isLoggedIn; },
}
  

Теперь вы можете использовать isLoggedIn в своем v-if для отображения кнопки выхода из системы. Просто не забудьте либо импортировать хранилище в свои компоненты, либо сделать его глобальным (все, что вам нужно, есть в документах Vuex).

Другой способ — использовать шину событий.

/src/event-bus.js

 import Vue from 'vue';
export const EventBus = new Vue();
  

Импортируйте его в свой компонент Login.

 import EventBus from '@/event-bus';
  

После получения токена и успешного входа в систему выдайте событие:

 EventBus.$emit('logged-in', true);
  

Теперь импортируйте EventBus в компонент, который получает событие (ваш компонент с кнопкой выхода) и поместите прослушиватель в свой mounted хук:

 mounted() {
  EventBus.$on('logged-in', payload => {
    this.isLoggedIn = payload;
  })
}