Question

我有一个带有[登录]链接的页面标题（导航栏），单击它可以导航到/ login路径。 “登录”组件显示模式形式并验证/登录用户，然后将路由再次设置为“主页”。此时，标头的[登录]应该更改为[“ loggedinUser”]，但没有更改。这是代码

（将bootstrap-vue用于CSS）

./ App.vue

<template>

  <component :is="layout">
    <router-view :layout.sync="layout"/>
  </component>

</template>

<script>

export default {
  name: 'App',

  data () {
    return {
      layout: 'div'
    }
  }

}
</script>

./ components / BaseLayout.vue

<template>
<div>
    <Header/>
    <slot />
    <Footer/>
</div>
</template>

<script>

import Header from './Header'
import Footer from './Footer'

export default {
  name: 'BaseLayout',

  props: [],

  components: { Header, Footer },

  methods: {}
}
</script>

导航栏通过此组件呈现。 ./ components / Header.vue

<template>
  <b-navbar
    type="dark"
    variant="dark"
    fixed="top"
    class="text-monospace text-white"
  >
    <b-navbar-brand to="/">MyWebapp</b-navbar-brand>

    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#" disabled>DISABLED</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">

        <b-nav-item to="/about">ABOUT</b-nav-item>

        <header-user></header-user>

      </b-navbar-nav>
    </b-collapse>

  </b-navbar>
</template>

<script>
import HeaderUser from '@/components/HeaderUser.vue'

export default {
  components: { HeaderUser }
}
</script>

“ header-user”是Header的早期部分，但我将其作为一个单独的组件。

./ HeaderUser.vue

<template>
    <div>
        <b-nav-item
          v-show="!isAuthenticated"
          @click="signin"
        >&lbbrk;LOG IN&rbbrk;
        </b-nav-item>

        <b-nav-item-dropdown
          v-show="isAuthenticated"
        >
          <template slot="button-content">&lbbrk;{{ loggedinUser }}&rbbrk;</template>
          <b-dropdown-item href="#" disabled>profile</b-dropdown-item>
          <b-dropdown-item @click="signout">log off</b-dropdown-item>
        </b-nav-item-dropdown>
    </div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'HeaderUser',

  data () {
    return {
      authenticated: false
    }
  },

  methods: {
    ...mapActions('user', ['logout']),

    signin () {
      this.$router.push('/login')
    },

    signout () {
      // this.$store.dispatch('logout')
      this.logout()
      this.authenticated = false
      this.$router.push('/landingpage')
    }

  },

  computed: {
    ...mapGetters('user', ['isAuthenticated', 'getCurrentUser']),

    loggedinUser: function () {
      if (this.getCurrentUser) {
        return this.getCurrentUser['name'].toUpperCase()
      } else {
        return null
      }
    }

  }

}
</script>

这是登录组件

./ pages / Login.vue

<template>
    <div>
    <b-modal
      size="lg"
      id="loginModal"
      title="Credentials"
      hide-footer
      centered
      no-close-on-backdrop
      >
        <b-form inline>

        <b-input
            class="mb-2 mr-sm-2 mb-sm-0"
            id="usernameInput"
            placeholder="Lab user id"
            v-model="loginForm.user"
        />

        <b-input
            type="password"
            id="passwordInput"
            placeholder="Unikix domain password"
            v-model="loginForm.password"
        />

        <b-button @click="authenticate">Submit</b-button>
        </b-form>
    </b-modal>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'Login',

  data () {
    return {
      loginForm: {
        user: '',
        password: '',
        rememberChecked: ''
      }
    }
  },

  methods: {
    ...mapActions('user', ['login']),

    authenticate () {
      this.login(this.loginForm)
        .then(() => {
          this.$emit('authenticated', true) // But who's catching?
          this.$router.push('/landingpage')
        })
        .catch(e => {
          this.$router.push('/404')
        })
    },

  },

  mounted () {
    this.$bvModal.show('loginModal')
  }
}
</script>

由于页眉和登录名是独立的组件（没有关系），因此我无法在它们之间进行通信。成功登录后，并且状态已更改，Header不会意识到它，也不会对其做出反应。 [登录]保持不变。

我该如何解决？

（登录成功后，如果我在浏览器中重新加载页面，则标题将正确显示为“ loggedinUser”。

Answer 1

您的商店在那里可以在组件之间共享信息。

默认情况下，字母应该是反应性的，因此，getter isAuthenticated更改时应反映在所有组件中，但这取决于您如何编写getter。

如果要在状态下动态添加对象的属性，则需要使用 Vue.Set/this.$set

尝试看看这个示例，它可能会对您有所帮助。

https://codesandbox.io/s/vuex-store-yhyj4

Vue组件未重新渲染/刷新

1 个答案: