Как сохранить ответ API chrome идентификатора в компоненте vuejs - PullRequest
Новая
       180

Как сохранить ответ API chrome идентификатора в компоненте vuejs

0 голосов
/ 09 мая 2020

Я передаю ответ от chrome identity api на вкладку, на которой будет работать мое vue питание chrome расширение. Мне нужно сохранить эту информацию в моем экземпляре vue, чтобы использовать ее внутри компонента. Я попытался присвоить информацию переменной, используя this.username, но это приведет к undefined в консоли. Что не так с кодом и как лучше всего выполнить sh это?

код компонента 

<script>
import { EventBus } from '../../event-bus';

export default {
  data () {
    return {
      socket: null,
      isRegistered: false,
      isConnected: false,
      username: null,
      message: '',
    }
  },
  created() {

  },
  mounted() {
    chrome.runtime.onMessage.addListener(
      function(request, sender){
      console.log(request);
      this.username = request.name;
      this.isRegistered = true;
    });
    EventBus.$emit('open-connection')
// the variable is undefined and also the open-connection event are not emitted?
    console.log(this.username)
    EventBus.$on('connected', (socket) => {
      console.log(socket)
      this.socket = socket;
      this.isConnected = true;
      console.log(this.socket.id)
    })
  },
  methods: {
// I was using this method but the function isn't called inside mounted, result in an error :(
    connect(){
      //if( this.isRegistered === false){
        //this.username = this.username;
        //this.isRegistered = true;
        //EventBus.$emit('open-connection')
        //return this.username;
     // }
    }
    // methods here 
  }
}
</script>

<style scoped>

</style>

Ответ от идентификатора api (я опущу значение полей для конфиденциальности): 

{
  "id": "100xxxxxx",
  "name": "xxx",
  "given_name": "xxxx",
  "family_name": "xxxx",
  "picture": "https://lh4.googleusercontent.com/xxxxx.jpg",
  "locale": "xx"
}

NB: объект ответа таким образом недоступен key.val

EDIT

После некоторой отладки я наконец нашел решение. Информация об ответе, полученная api, на самом деле не объект, а JSON. Я использовал функцию JSON.parse(), чтобы сделать его объектом, и теперь я могу получить доступ к полям, используя синтаксис key.value.

1 Ответ

1 голос
/ 09 мая 2020

Возможно, вы могли бы использовать chrome.storage для установки / получения данных, а не полагаться на состояние компонентов.

В противном случае вы можете поделиться тем, что console.log(request) дает вам и как выглядит фоновый сценарий ?

...