Question

这是我第一次玩Vue.js，但我需要将Facebook SDK用于login。

许多文档emphasize要求必须首先异步加载Facebook SDK。

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

Using the created method while creating a new Vue instance
我无法使用此选项，因为我正在使用vue-router，只有one component将使用Facebook SDK进行登录。
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 => {
    // ...
});

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

1 个答案: