6

This is probably a "JavaScript" question not specific to Vue. I'm trying to import specific modules as an alias but that doesn't appear to be possible. My specific problem is shown below trying to use modular imports with AWS Amplify and Vue. Here is the "non-modular" version that creates the Vue instance.

import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import aws_exports from './aws-exports';

Amplify.configure(aws_exports)
Vue.use(AmplifyPlugin, AmplifyModules)

I've done this:

import Amplify from '@aws-amplify/core'

But I can't figure out how to pass a subset of AmplifyModules to Vue. I keep getting this error:

Uncaught (in promise) TypeError: Cannot read property 'Logger' of undefined
at VueComponent._callee$ (aws-amplify-vue.common.js?19b2:3257)
at tryCatch (runtime.js?96cf:62)
at Generator.invoke [as _invoke] (runtime.js?96cf:288)
at Generator.prototype.(:8080/anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (aws-amplify-vue.common.js?19b2:6805)
at _next (aws-amplify-vue.common.js?19b2:6827)
at eval (aws-amplify-vue.common.js?19b2:6834)
at new Promise ()
at VueComponent.eval (aws-amplify-vue.common.js?19b2:6823)
at VueComponent.mounted (aws-amplify-vue.common.js?19b2:3288)

It looks like Vue is looking for specific modules, Auth, Logger, etc. which are normally provided by the AmplifyModules alias but that imports all modules from aws-amplify which is not modular.

Any ideas?

4

4 回答 4

9

想出了这个...

我调试了模块传递问题，并让事情与 Vue 和模块化导入一起工作。对于任何感兴趣的人，我将“import * as AmplifyModules”替换为：

import { Logger } from '@aws-amplify/core'
import { I18n } from '@aws-amplify/core'
import Auth from '@aws-amplify/auth'
import { AuthClass } from '@aws-amplify/auth'

并像这样使用它：

Vue.use(AmplifyPlugin, { AuthClass, Auth, Logger, I18n })

希望这可以帮助某人

于 2018-12-27T17:22:10.437 回答
4

我花了几个小时来找到这个问题的答案，所以我将分享对我有用的东西。

请注意，我的项目中不需要aws-amplify-vue，因此它可能与您需要的不同。

在我的情况下，我只需要 Auth，所以在 main.js 中我有：

import Amplify from '@aws-amplify/core'
import Auth from '@aws-amplify/auth' // eslint-disable-line no-unused-vars

Amplify.configure(awsconfig)

Vue.prototype.$Amplify = Amplify // <- This line is important

我没有这样做import { AmplifyPlugin } from 'aws-amplify-vue'; Vue.use(AmplifyPlugin)，因为我不需要它，所以我必须通过执行以下操作手动附加 Amplify：Vue.prototype.$Amplify = Amplify

然后在我的组件中，我将其用作：

this.$Amplify.Auth.signOut()

这为我节省了大约 250KB 的包大小。

于 2019-09-06T04:08:41.873 回答
0

目前以模块化方式导入东西并不容易。

这是公开和积极的工作：https ://github.com/aws-amplify/amplify-js/issues/3365

于 2019-08-02T00:53:09.213 回答
-3

谢谢你，克里夫！或者您可以像这样在 main.js 中配置 Amplify：

import Amplify from 'aws-amplify';
import awsExports from '@/aws-exports';

Amplify.configure(awsExports);

并在您使用它们的地方导入模块，因为您不一定需要它们在全球范围内可用。例如，我在导入该模块的 mixin 中拥有所有身份验证函数：

import { Auth } from 'aws-amplify';

export default {
  methods: {
    forgotPassword(email) {
      Auth.forgotPassword(email)
         .then(...
于 2019-02-01T20:43:17.030 回答