Question

当渲染到另一个组件以快速渲染时如何制作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上的登录，并且我使用所有挂钩来交换登录按钮ans logout，它根本没有改变，:(

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

Answer 1

要在不同组件之间共享状态，最好的选择是使用状态管理库，例如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();

将其导入您的登录组件中。

import EventBus from '@/event-bus';

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

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

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

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

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

1 个答案: