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

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; },
}

现在，您可以在v-if使用isLoggedIn来显示注销按钮。 只需记住将商店导入组件中或使其成为全局商店即可（所需的一切都在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;
  })
}