Vue.js 如何在将组件加载到模板中之前对其进行配置？答案

【问题标题】：Vue.js how to configure a component before loading them in template?Vue.js 如何在将组件加载到模板中之前对其进行配置？
【发布时间】：2020-07-03 23:47:26
【问题描述】：

我有一个 vue 单文件模板，我正在其中进行一些数据提取（一个 JWT 令牌）并使用该令牌向 graphql 端点发出第二个请求。我的模板中的提供程序组件使用该 JWT 令牌并传递一个 :client 属性，该属性应事先使用 JWT 令牌设置（在模板中呈现之前），如下所示：<Provider :client="strapiClient">。但是，我没有在渲染我的组件之前知道如何执行此步骤.... 最好的方法是什么？我应该在我的应用程序之外还是在内部使用方法和钩子进行获取和配置？我对 vue.js 还是很陌生...

<template>
    <Provider :client="strapiClient">
        <Query query= "{ questionDomains { name, description, question_topics {name,description, question_items {name, description}}}}"
        v-slot="{ data, fetching }">
        <div v-if="fetching">Is Fetching ...</div>
        <div v-else>
            <pre>{{ data }}</pre>
        </div>
        <span>{{jwtStrapi}} </span>
    </Query>
    </Provider>

</template>

<script>
import { Provider, createClient, Query } from 'vue-gql'
// import axiosStrapi from '../components/Helpers/axios'
import axios from 'axios'
// import myImportedQuery from '../graphqlQueries/strapiquery.graphql';

const strapiRoot = 'http://localhost:1337/'
const strapiToken = await axios.post(strapiRoot + 'auth/local', {
    identifier: 'test@strapi.io',
    password: process.env.VUE_APP_STRAPI
})
let strapiClient
    if (strapiToken) {
        strapiClient = createClient({
        url: strapiRoot + 'graphql',
        context: () => {
            return {
                fetchOptions: {
                    headers: {
                        Authorization: `bearer ${strapiToken}`
                    }
                }
            }
        }
    })
    } else {
        strapiClient = createClient({
            url: strapiRoot + 'graphql'
        })
    }

export default {
    components: {
        Provider,
        Query
    },
    methods: {
        init: async function () {
            this.jwtStrapi = await this.getStrapiToken()
            // console.log('jwtStrapi:', jwtStrapi)
            // this.getStrapiClient(this.jwtStrapi)
        },
        getStrapiToken: async function getStrapiToken (url = strapiRoot + 'auth/local', data = {}) {
            const resp = await axios.post(url, {
                identifier: 'admin@strapi.io',
                password: process.env.VUE_APP_STRAPI_PW
            })
            if (resp.data.jwt) {
                return resp.data.jwt
            }
            return null
        },
        getStrapiClient: async function () {
            const token = await this.getStrapiToken()
            if (token) {
                this.strapiClient = await createClient({
                    url: strapiRoot + 'graphql',
                    context: () => {
                        return {
                            fetchOptions: {
                                headers: {
                                    Authorization: `bearer ${this.jwtStrapi}`
                                }
                            }
                        }
                    }
                })
                return this.strapiClient
            } else {
                this.strapiClient = await createClient({
                    url: strapiRoot + 'graphql'
                })
                return this.strapiClient
            }
        }
    },
    mounted: function () {
        this.init()
    },
    data: function () {
        return {
            strapiClient,
            jwtStrapi: null
        }
    }
}
</script>

【问题讨论】：

标签： javascript vue.js templates graphql hook

【解决方案1】：

您可以在 Provider 组件上放置一个 v-if，以便它仅在 strapiClient 变量加载后加载。

<Provider v-if="strapiClient" :client="strapiClient">
    <Query query= "{ questionDomains { name, description, question_topics {name,description, question_items {name, description}}}}"
        v-slot="{ data, fetching }">
        <div>
            <pre>{{ data }}</pre>
        </div>
        <span>{{jwtStrapi}} </span>
    </Query>
</Provider>
<div v-else>Is Fetching ...</div>

【讨论】：