我需要将 api 应用程序密钥作为道具传递,以便动态更改它,而不是硬编码密钥。提供的代码将更详细地显示问题。
应用程序.vue:
<template>
...
</template>
<script>
import Api from './Api.js'
export default {
name: 'Widget',
components: {
someComponent
},
props: {
albumName: {
type: String,
default: 'Homepage'
}
},
data () {
return {
.....
}
},
mounted () {
this.fetchData()
},
methods: {
async fetchData () {
const options = {
'album_name': this.$props.albumName
}
const { images, pagination } = await Api.getData(options)
this.media = this.media.concat(images)
this.morePagesAvailable = (pagination.page * pagination.per_page) < pagination.total
},
.....
</script>
api.js
import 'whatwg-fetch'
import queryString from 'query-string'
const APP_KEY = '1s4...dzqvux'
const getData = async (options) => {
const params = queryString.stringify({
...options
})
const response = await window.fetch(`https://someURL/${APP_KEY}/theAlbumParameters?${params}`, {
method: 'GET',
headers: { 'Content-Type': 'application/json' }
})
return response.json()
}
Api = {
async getData (options) {
const data = await getData(options)
return data.response
}
}
export default Api
我希望将“APP_KEY”作为道具而不是硬编码,就像作为道具从 Api.js 传递到 App.vue 的“album_name”一样。请让我知道我可以提供的任何其他信息。谢谢