Vue. js как настроить компонент перед загрузкой его в шаблон?

Question

У меня есть vue шаблон одного файла, где я делаю некоторую выборку данных (токен JWT) и использую этот токен, чтобы сделать второй запрос к конечной точке graphql. Компонент Provider в моем шаблоне использует этот токен JWT и получает свойство: client, которое должно быть предварительно настроено с токеном JWT (до его визуализации в шаблоне), например так: <Provider :client="strapiClient">. Однако я не знаете, как сделать этот шаг перед рендерингом моих компонентов .... Каков наилучший подход? Должен ли я делать выборку и настройку вне моего приложения или внутри с помощью методов и хуков? Я все еще новичок в vue. js ...

<code><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 }}

{{jwtStrapi}} import { Provider, createClient, Query} из 'vue -gql' // импорт axiosStrapi из '../components/Helpers/axios' import ax ios из 'ax ios' // импорт myImportedQuery from ' ../graphqlQueries/strapiquery.graphql '; const strapi Root = 'http://localhost: 1337 /' const strapiToken = await ax ios .post (strapi Root + 'auth / local', {идентификатор: 'test@strapi.io', пароль: process.env .VUE_APP_STRAPI}) пусть strapiClient if (strapiToken) {strapiClient = createClient ({url: strapi Root + 'graphql', context: () => {return {fetchOptions: {headers: {Авторизация: `bearer $ {strapiToken} `}}}}})} else {strapiClient = createClient ({url: strapi Root + 'graphql'})} экспорт по умолчанию {компоненты: {поставщик, запрос}, методы: {init: asyn c function ( ) {this.jwtStrapi = await this.getStrapiToken () // console.log ('jwtStrapi:', jwtStrapi) // this.getStrapiClient (this.jwtStrapi)}, getStrapiToken: asyn c функция getStrapiToken (url = str 1031 * + 'auth / local', data = {}) {const resp = await ax ios .post (url, {identifier: 'admin@strapi.io', пароль: process.env.VUE_APP_STRAPI_PW}) if (соотв. data.jwt) {return resp.data.jwt} return null}, getStrapiClient: asyn c function () {const token = await this.getStr apiToken () if (token) {this.strapiClient = await createClient ({url: strapi Root + 'graphql', context: () => {return {fetchOptions: {headers: {Authorization: `bearer $ {this. jwtStrapi} `}}}}}) вернуть this.strapiClient} else {this.strapiClient = await createClient ({url: strapi Root + 'graphql'}) вернуть this.strapiClient}}}, смонтированный: function () { this.init ()}, data: function () {return {strapiClient, jwtStrapi: null}}}

Answer 1

Вы можете поместить v-if в компонент Provider, чтобы он загружался только после загрузки переменной strapiClient.

<code><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 }}

{{jwtStrapi}} Извлекает ...