如何将AWS SDK导入Vue.JS

Question

I have the AWS Javascript for Browsers SDK that's been configured from my AWS API Gateway endpoints.

The readme says that I need to include the files and then reference like this:

<script type="text/javascript" src="apigClient.js"></script>

This file contains:

var apigClientFactory = {};
apigClientFactory.newClient = function (config) {
    var apigClient = { };
    if(config === undefined) {
        config = {
            accessKey: '',
            secretKey: '',
            sessionToken: '',
            region: '',
            apiKey: undefined,
            defaultContentType: 'application/json',
            defaultAcceptType: 'application/json'
        };
    // Etc...

}

However I'm not sure how to do this in Vue.js. I've set up a separate component which I think needs to import this file, but how do I do that?

Answer 1

There is nothing particular to know, really.

I'm not sure this is the way to go with AWS SDK, but if you don't want to use a bundler, just assign the variable you want to export to the global window object. It should be available everywhere, including in your components.

If you want to use the newClient function outside, you can make apigClientFactory global.

window.apigClientFactory = {};
apigClientFactory.newClient = function (config) {
    // ...
}

So in your component you can create a new client, assuming that newClient() return the created client:

var myClient = window.apigClientFactory.newClient();

Or, if you want to keep a single AWS client through you whole app, make the client itself global instead.

var apigClientFactory = {};
apigClientFactory.newClient = function (config) {
    // ...
}
window.myClient = apigClientFactory.newClient();