vue.js - 从 api 返回 promise 并放入全局数据

Question

抱歉，如果这很明显但对 vue 来说是新的，而且我的 js 不是很好......

我正在尝试从 api 获取一些数据，然后将该数据放入一个全局对象中，以便它可以传递给一些子组件。

我似乎无法将数据 $set 到全局项目对象中，它要么返回未定义，要么返回一个 promise 。

parent ——

<template>
  <div id="app">
     <section class="intro">
         <h1>WELCOME</h1>
     </section>
      <transition name="fade"> <router-view class="view" :computedProjects=computedProject ></router-view></transition>
  </div>
</template>
<script>



import projectsList from './components/projectsList'


var client = contentful.createClient({
  // This is the space ID. A space is like a project folder in Contentful terms
   space: '',
  // This is the access token for this space. Normally you get both ID and the token in the Contentful web app
  accessToken: '',
})

var PRODUCT_CONTENT_TYPE_ID = 'project'

export default {
  name: 'app',
  components: {
  projectsList
  },
     data: function()  {
        return {
        users:'',
        projects:'',

         }
    },

methods: {},
created : function () {
  client.getEntries().then((response) => {
    console.log(response)
    this.projects = response
    console.log(this.projects)
    return response
  });
},
computed: {
  computedProject: function() {
    if (!this.projects) return null;
    return this.projects;
  }
}


}
    }

child ---

<template>
<section class="project-list">
       <swiper :options="swiperOption">
        <swiper-slide v-for="project in projects" v-bind:ref="'project' + project.name" :key="project.name" data-swiper-parallax="-100">
            <div class="project-cover wrapper">
                {{project.name}}
                <router-link :to="{ name: 'project', params: { id: project.name }}">
                    <div class="cover-img" :style="{ 'background-image': 'url(../static/img/projects/'+project.name+'/'+'project-details-header.jpg)' }"> </div>

                    <div class="project-copy"></div>
                    <div href="#" class="tilter tilter--4">
                        <figure class="tilter__figure">
                            <img class="tilter__image" :src="'+project.fields.coverImage.fields.file.url+'" alt="" />
                            <div class="tilter__deco tilter__deco--shine"></div>
                            <div class="tilter__deco tilter__deco--overlay" v-bind:style="{ backgroundImage: project.gradient }"></div>
                            <figcaption class="tilter__caption">
                                <h1 class="projectName tilter__title title">{{project.name}}</h1>
                                <h2 class="tilter__description">{{project.tagline}}</h2>
                            </figcaption>
                            <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
                                <path d="M20.5,20.5h260v375h-260V20.5z" />
                            </svg>
                        </figure>
                    </div>
                    </router-link>

            </div>
            </swiper-slide>
                 <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
 </section>
</template>

<script>
export default {
    data: function () {
     return {
        swiperOption: {
        autoplay:false,
        setWrapperSize :true,
        observeParents:true,
        keyboardControl : true,
        centeredSlides :true,
        freeMode:false,
        freeModeSticky:true,
        pagination: '.swiper-pagination',
        paginationType: 'progress',
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        speed:650,
        grabCursor:true,
        parallax:true
        },


     }
    },

    props :['computedProject'],

    created : function () {
        console.log(this.projects)
   },

我们将不胜感激。

Answer 1

您可以在 getEntries 的回调中分配 vue 数据变量，如下所示:

 created : function () {
    var self = this
    client.getEntries().then((response) => {
      console.log(response)   
      self.projects = response
    })
    console.log(this.projects)
  },