如何在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 => {
    // ...
});