时间戳

首页 > 解决方案 > Vue.js 如何在将组件加载到模板中之前对其进行配置？

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

问题描述

我有一个 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>

标签： javascriptvue.jstemplatesgraphqlhook

解决方案

您可以在组件上放置一个 v-if，Provider以便它仅在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>

推荐阅读