Javascript Vue.js将对象复制到其他组件

您好，我有一个登录页面，我想用从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>

直到同侧眼睑
布鲁格纳文
科多尔
hjælp的Brug？环+4550500

从“axios”导入axios
从“./js/Account.js”导入{Account}
导出默认值{
名称：'登录'，
数据（）{
返回{
用户名：“”，
密码：“”，
帐户：“”
}
},
方法：{
登录（）{
axios.post（'MYAPI'{
用户名：this.username，
密码：这个是密码
})。然后（响应=>{
console.log（this.username）
console.log（这个密码）
console.log（响应）
如果（！response.data.Error）{
if（response.data.status.type==0 | | response.data.status.type==1）{
这是。$session.start（）
this.account=response.data
账户.$emit（'账户填充'，此账户）
//this.$session.set（'jwt'，response.body.token）//为会话提供一个键和一个值
//Vue.http.headers.common['Authorization']='Bearer'+response.body.token//security
//此.$router.push（“/dashboard”）
console.log（this.account）
}
}否则{
警惕（“出了点问题”）
}
})
}
}
}

---

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

在母版页中创建对象变量obj1（您可以在head部分的顶部创建该变量，以便在任何脚本运行之前都可用）。您可以从所需的任何组件访问此变量。假设要存储组件中的对象obj2。在您的组件库中，如下所示--

---

从任何其他组件，您都可以使用obj1访问它。obj2

我建议您使用来存储帐户详细信息，这样您就可以从任何组件访问它。但是，我必须重新制作我的整个应用程序以使用vuex？我不这样认为，您可以部分实现它，只在您希望使用它的地方实现。我相信，在这种情况下给vuex一个改变是值得的，更重要的是，你正在处理一个用户，这个用户通常（相信我）在多个组件中使用。您可以按此操作，这是我不愿意做的另一个选项，但这是一个选项，您可以代替

this.$emit（'logged'，this.account）

并在登录的父级上调用登录组件，您将在父级中执行

…

，您需要声明

方法：{functionToReceiveAccountDetails（帐户）{console.log（帐户）；}

这样，您可以在父组件中传递设置数据，然后好的，我将尝试vuex解决方案，但假设我在app.vue上创建此obj，然后在登录页面上填充它。然后在另一个组件上使用它？此解决方案是否可行？从“@/components/Header”导入标头导出默认值{name:'app'，components:{'Header'：Header}}@import./assets/style/style'；我的代码在母版页上看起来像这样。那么我应该将obj变量放在哪里？母版页表示html、head或body元素的放置位置

obj1.obj2 = obj2;