Question

您好，我正在查看Vue，并使用Facebook登录名构建一个网站。我有一个Facebook登录组件，该组件可以工作，尽管我很难使自己获得的fbid，fbname（无论该组件外部的Vue可用什么）都可以使用。确认这很可能是101问题，将不胜感激。

我尝试了全局“原型”变量，但没有成功。怎么样了

下面的代码：

main.js

new Vue({
    router, 
    render: h => h(App),
    vuetify: new Vuetify()
}).$mount('#app')

App.vue

...

import FacebookComp from './components/FacebookComp.vue'

export default {
  name: 'app',
  components: {
    FacebookComp
  },

...
}

组件-FacebookComp.vue

<template>
  <div class="facebookcomp">

    <facebook-login class="button"
      appId="###"
      @login="checkLoginState"
      @logout="onLogout"
      @get-initial-status="checkLoginState">
    </facebook-login>

  </div>
</template>

<script>

//import facebookLogin from 'facebook-login-vuejs';
//import FB from 'fb';

export default {
  name: 'facebookcomp',
  data: {
    fbuserid: "string"
  },
  methods: {
    checkLoginState() {
      FB.getLoginStatus(function(response) {
        fbLoginState=response.status;
      });
      if(fbLoginState === 'connected' && !fbToken){
        fbToken = FB.getAuthResponse()['accessToken'];
        FB.api('/me', 'get',  { access_token: fbToken, fields: 'id,name' }, function(response) {

          fbuserid=response.id;

        });
      }
    },
...
}

VIEW-view.vue

...

export default {
    name: 'view',
    data: function() { 
        return { 
      someData: '',
  },
  mounted() {
    alert(this.fbloginId); //my facebook ID here
  },


...
}

Answer 1

如果您想在整个应用程序中使用FB登录中的所有这些道具，则强烈建议使用vuex。如果您现在对SPA中的状态管理不熟悉，则基本上可以使用全局容器状态。您只能通过称为突变（同步）的函数对其进行更改。但是，您不能直接从组件中调用它们。这就是所谓的动作（异步）功能的作用所在。整个流程是：动作=>突变=>状态。将所需的数据保存到状态后，就可以通过称为getters的函数在任何vue组件中对其进行访问。

如果您只需要仅在父级中可见的数据，另一种选择是仅从FacebookComp.vue发出数据并在View.vue中侦听事件。请注意，要使此工作有效，FacebookComp.vue必须是View.vue的子级。有关第二种方法的实施的更多信息，请查看docs。

Vue-将组件数据传递给视图

1 个答案: