时间戳

首页 > 解决方案 > 在组件Vue js中渲染时如何制作动态v-if？

javascript - 在组件Vue js中渲染时如何制作动态v-if？

问题描述

渲染到另一个组件时如何使 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("token") 我关闭按钮登录并注册，navbar header.vue如果客户端有令牌，它应该显示注销按钮，但它不是，之后成功登录，我应该重新加载它以获取按钮logout showing

如何强制它快速改变？交换显示和隐藏按钮登录和注销？？

我还制作道具来检查我的登录，我App.vue使用所有挂钩来交换登录按钮和注销，它根本没有改变，:(

当我删除我的列表时它也发生了，我应该重新加载它:(我希望你们能给我一些帮助和技巧来解决这个问题:D

标签： javascriptvue.jsvuejs2vue-router

解决方案

要在不同组件之间共享状态，最好的选择是使用像 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; },
}

您现在可以使用isLoggedInin yourv-if来显示注销按钮。只需记住在组件中导入您的商店或使其成为全球性的（您需要的一切都在 Vuex 的文档中）。

另一种方法是使用事件总线。

/src/event-bus.js

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

将其导入您的登录组件。

import EventBus from '@/event-bus';

获取令牌并成功登录后，发出一个事件：

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

现在在接收事件的组件（带有注销按钮的组件）中导入 EventBus 并在您的mounted钩子中放置一个侦听器：

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

推荐阅读