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

Question

这是我第一次使用Vue.js，但我需要使用Facebook SDK 来代替login。

很多文档emphasize必须先异步加载Facebook SDK。

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

1. Using the created method while creating a new Vue instance
   我无法使用此选项，因为我使用的是vue-router，并且只有one component 将使用 Facebook SDK 进行登录。

2. Using 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 => {
    // ...
});