[英]How to wait for Facebook SDK load in Vue.js Single-File Component
This is my first time to play with Vue.js but I need to use Facebook SDK for login .这是我第一次玩Vue.js ,但我需要使用Facebook SDK进行登录。
Many documents emphasize that the Facebook SDK must first be loaded asynchronously.许多文档强调必须首先异步加载 Facebook SDK。
I know there are a couple of Q&As on this topic at StackOverflow, but my case differs.我知道在 StackOverflow 上有几个关于这个主题的问答,但我的情况不同。
Using the created
method while creating a new Vue instance在创建新的 Vue 实例时使用
created
方法
I cannot use this option because I'm using vue-router and only one component will use Facebook SDK for login.我无法使用此选项,因为我使用的是vue-router ,并且只有一个组件将使用 Facebook SDK 进行登录。
Using nuxt.js
使用
nuxt.js
I don't know much about Vue.js yet.我对 Vue.js 还不太了解。 Trying nuxt.js seems like opening up a whole new can of worms.
尝试nuxt.js似乎打开了一个全新的蠕虫罐头。
Is there any example of loading Facebook SDK asynchronously in a Vue.js single-file component?是否有任何在 Vue.js 单文件组件中异步加载 Facebook SDK 的示例?
After doing the following you can call any of the SDK functions, like the login one, like this: Vue.FB.login()
.执行以下操作后,您可以调用任何 SDK 功能,例如登录功能,如下所示:
Vue.FB.login()
。 Initialize the SDK before you call the Vue constructor.在调用 Vue 构造函数之前初始化 SDK。 In
lib/FacebookSdk.js
:在
lib/FacebookSdk.js
中:
const initFbSdk = (Vue, facebookClientId) => {
window.fbAsyncInit = () => {
FB.init({
appId: facebookClientId,
autoLogAppEvents: true,
xfbml: true,
version: 'v3.2',
});
Vue.FB = FB;
};
};
And in main.js
:在
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');
Use it in your components or anywhere else like在您的组件或其他任何地方使用它
import Vue from 'vue';
// ...
Vue.FB.login(resp => {
// ...
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.