Как сделать динамический V-если при рендеринг в компоненте Vue JS? - PullRequest
Новая
       12

Как сделать динамический V-если при рендеринг в компоненте Vue JS?

0 голосов
/ 20 апреля 2019

как сделать v-if при рендеринге в другой компонент для быстрой рендеринга?у меня есть какой-то случай, когда я собираюсь войти в систему и после успеха мое nabvar component изменение doest после его завершения, я должен вручную перезагрузить его на моем клиенте, чтобы получить 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 ("token") я закрываю кнопку входа и регистрируюсьна navbar header.vue и должна отображаться кнопка выхода из системы, если у клиента есть токен, но после успешного входа в систему я не должен был перезагрузить его, чтобы получить кнопку logout showing

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

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

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

1 Ответ

2 голосов
/ 20 апреля 2019

Чтобы разделить состояние между различными компонентами, лучше всего использовать библиотеку управления состояниями, такую ​​как 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;
  })
}
...