Vue.js将对象粘贴到其他组件

Question

您好，我有一个登录页面，我想用从API获取的响应填充我的帐户，然后在我的标头和其他地方使用它。 我在app.vue中呈现的标题。 我如何访问充满对象的帐户

这是我的代码。

    <template>
    <div class="rating-login-view">
    <div class="rating-login-view__form">
      <span></span>
      <form class="login-form">
        <h1 class="login-form__greeting">Velkommen til <span class="break large">Lorem Ipsum</span></h1>
        <label class="login-form__username" for="username">
          <span>Brugernavn</span>
          <input class="input-username" id="username" type="text" name="username" v-model="username" placeholder="Butik">
        </label>
        <label class="login-form__password" for="password">
          <span>Kodeord</span>
          <input class="input-password" id="password" type="password" v-model="password" name="password" placeholder="*********">
        </label>
        <input class="login-form__submit" type="submit" v-on:click.prevent="login()" value="Log in">
      </form>
      <p class="customer-help">Brug for hjælp? Ring +45 50 500 500</p>
    </div>
    <div class="rating-login-view__image">
      <span class="organisation">
        <img class="organisation-logo" src="http://via.placeholder.com/150x150" alt="">
      </span>
    </div>
  </div>
</template>

    <script>
    import axios from 'axios'
    import {Account} from './js/account.js'

    export default {
      name: 'login',
      data () {
        return {
          username: '',
          password: '',
          account: ''
        }
      },
      methods: {
        login () {
          axios.post('MYAPI', {
            username: this.username,
            password: this.password
           }).then(response => {
             console.log(this.username)
        console.log(this.password)
        console.log(response)
        if (!response.data.Error) {
          if (response.data.status.type === 0 || response.data.status.type === 1) {
            this.$session.start()
            this.account = response.data
            Account.$emit('account fill', this.account)
            // this.$session.set('jwt', response.body.token)     // gives a key and a value to the session
            // Vue.http.headers.common['Authorization'] = 'Bearer ' + response.body.token   // security
            // this.$router.push('/dashboard')

            console.log(this.account)
          }
        } else {
          alert('something went wrong')
        }
      })
    }
  }
        }
        </script>

      <!-- Add "scoped" attribute to limit CSS to this component only -->
      <style>

我想在此组件之外的其他地方使用填充帐户

Answer 1

在“主页”页面中创建一个对象变量obj1 （您可以在头部的顶部创建此变量，以便在运行任何脚本之前就可以使用该变量）。 您可以从任何所需的组件访问此变量。 假设您要存储组件中的对象obj2 。 在您的组件存储obj2中，像这样-

obj1.obj2 = obj2;

从任何其他组件，您都可以使用obj1.obj2进行访问