如何在 Vue 中等待 Facebook SDK 加载.js单文件组件

Question

这是我第一次玩 Vue.js但我需要使用 Facebook SDK 登录。

许多文档强调，Facebook SDK必须首先异步加载。

我知道在StackOverflow上有几个关于这个主题的问答，但我的情况有所不同。

1. 在创建新的 Vue 实例时使用created方法
   我无法使用此选项，因为我使用的是 vue-router，只有一个组件将使用 Facebook SDK 进行登录。

2. 使用nuxt.js
   我对 Vue 还不太了解.js。尝试nuxt.js似乎打开了一个全新的蠕虫罐头。

有没有在 Vue.js 单文件组件中异步加载 Facebook SDK 的例子？

Answer 1

执行以下操作后，您可以调用任何 SDK 函数，例如登录函数，如下所示：Vue.FB.login().在调用 Vue 构造函数之前初始化 SDK。在lib/FacebookSdk.js：

const initFbSdk = (Vue, facebookClientId) => {
window.fbAsyncInit = () => {
FB.init({
appId: facebookClientId,
autoLogAppEvents: true,
xfbml: true,
version: 'v3.2',
});
Vue.FB = FB;
};
};

在main.js：

import { initFbSdk } from './lib/FacebookSdk';
// ...
initFbSdk(Vue, process.env.VUE_APP_FACEBOOK_CLIENT_ID);
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app');

在您的组件或其他任何地方使用它，例如

import Vue from 'vue';
// ...
Vue.FB.login(resp => {
// ...
});