访问组件上的页面数据

Question

我正在使用NUXT编写我的第一个应用程序。我在这个问题上停留了2天，所以我决定问一下，即使我认为这是一个简单答案的问题（必须）。

在我项目的布局上，我有一个default.vue和一个home.vue

default.vue：

<template>  
  <div>
    <!-- call Header component, this has an nav menu -->
    <Header />

    <!-- call Hero component -->
    <Hero />

    <nuxt />

    <Footer />

  </div>
</template>

<script>
import Header from '~/components/Header.vue'  
import Footer from '~/components/Footer.vue'
import Hero from '~/components/Hero.vue'  

export default {  
  components: {
    Header,
    Footer,
    Hero
  },
}
</script>  

我要显示每个页面（标题，副标题和imageUrl）中的数据。有时，这些数据来自阿波罗查询请求，而其他时间是在页面文件上定义的。

我已经阅读了文档，并在这里搜索了答案，但我无法实现。我认为必须完成Vuex store，但我不知道如何。

谢谢

Answer 1

您可以在vuex中使用nuxtServerInit操作作为填充页面数据的一种方法。

如果使用nuxt> = 2.12，请在布局内使用you can use the new-and-improved fetch hook进行阿波罗查询。

Answer 2

我做到了！

因此，花了一些时间才弄清楚，但在此过程中我学到了很多东西。在这里，我将提供一些我曾经用于此解决方案的参考。

• Very nice article on passing data through props, custom events and Vuex Store
• CodeSandBox from Nuxt Documentation.
• This question has a method to await apollo data and then render data

让我们按照我的方式去做。我不知道这是不是最好的，但是在这里就像一个饰物。

我已经在store文件夹中创建了一个hero.js文件：

  data: {
    title: "",
    subtitle: "",
    imgUrl: ""
  }
})

export const mutations = {
  setData (state, obj) {
    state.data = {...state.data, ...obj}
  }
}

export const getters = {
  getHero (state) {
    return state.data
  }
}

然后在我的default.vue上，我做了：

  <div>
    <!-- call Header component -->
    <Header />

    <!-- call Hero component with his slots-->
    <Hero>
      <template v-slot:title>
        <h1 class="title">{{ hero.title }}</h1>
      </template>

      <template v-slot:subtitle>
        <h2 class="subtitle">{{ hero.subtitle }}</h2>
      </template>

      <template v-slot:heroImg>
        <img :src="hero.imgUrl" />
      </template>
    </Hero>

    <!-- This is where all yours pages will be -->
    <nuxt />

    <Footer />

  </div>
</template>

<script>  
// Import Header component
import Header from '~/components/Header.vue'  
import Footer from '~/components/Footer.vue'  
import Hero from '~/components/Hero.vue'  

import { mapGetters } from 'vuex'

export default {
  data(){
    return {
      //declaring hero Obj to contain hero data
      hero: {
        title: "",
        subtitle: "",
        imgUrl: ""
      }
    }
  },

  components: {
    Header,
    Footer,
    Hero
  },

  //Getting getHero getter from hero.js and saving it to newHero
  computed: mapGetters({
    newHero: 'hero/getHero'
  }),

  //watching newHero to change and then updating this.hero Obj. This action will update the displayed data
  watch: {
    newHero: function (obj) {
      this.hero = {...this.hero, ...obj}
    }
  }
}
</script>  

这里我声明变量并将其存储到Vuex存储中：

<template>  
...
</template>

<script>  

export default {
  data() {
    return {
      hero: {
        title: "Awesome Static title",
        subtitle: "Awesome static subtitle"
      }
    }
  },

  //Saving the declared Hero to Vuex Store, then my default.vue will be able to get it through this.$store.getters  
  mounted() {
    this.$store.commit("hero/setData", this.hero);
  },
}
</script>  

在某些页面上，标题是从数据库中获取的（使用Apollo的GraphQL）。然后我做了：

<template>
...
</template>

<script>
import getLojaInfo from '~/apollo/queries/loja/loja.gql'

export default {  
  //declaring data
  data() {
    return {
      lojas: Array,
      loading: 0,
      hero: {
        title: "",
        subtitle: "",
        imgUrl: ""
      }
    }
  },

  //making the query
  apollo: {
    lojas: {
      $loadingKey: 'loading',
      prefetch: true,
      query: getLojaInfo,
      variables () {
        return { slug: this.$route.params.singleLoja }
      }
    },
  },

  //when mounted it will wait for apollo that and then populate this hero, it will update the hero title, subtitle and image
  mounted(){
    this.$apollo.queries.lojas.refetch().then((results) => {
      this.hero.title = results.data.lojas[0].name
      this.hero.subtitle = results.data.lojas[0].description
      this.hero.imgUrl = "http://localhost:1337" + results.data.lojas[0].logo.url

      //commit changes to Vuex Store, so it will be available to <Hero>
      this.$store.commit("hero/setData", this.hero);
    })
  }
}
</script>

谢谢大家，感谢您为我的代码所做的贡献。