Как передать объект во все компоненты (глобальная видимость)?

Question

[Saint739]

Для понятия сути вопроса создал песочницу.
Как сделать чтобы объект "client" из main.js стал виден в компоненте App.vue , её потомках и других файлах js
https://codesandbox.io/s/vue-template-qmdr7

Comments

[Дмитрий Морозов]

Если прям из любого компонента вызывать переменную client, то в идеале, подключить vuex и туда пробрасывать данные клиента и вызывать уже в из любого компонента в computed (через геттер)

Answer 1

[Виктор Л]

const createClient = XMPP.createClient({
  jid: "[e-mail]",
  password: "1",
  transport: "websocket",
  wsURL: "ws://example.com/xmpp-websocket"
});
Vue.prototype.$createClient = createClient;

export default {
  name: "App",
  created: function() {
    console.log(this.$createClient)
  }
};
</script>

Answer 2

[E]

вариант 1 (правильно): в методе Mounted() сделать запрос

export default {
    data() {
        return {
            client: {},
        }
    },
    mounted() {
        var client = XMPP.createClient({
            jid: "[e-mail]",
            password: "1",
            transport: "websocket",
            wsURL: "ws://example.com/xmpp-websocket"
        });

        this.client  = client 
    }
};

вариант 2 (не совсем правильно): https://codesandbox.io/s/vue-template-ey7rv

Comments

[E]

а что бы получить доступ из дочернего компонента

• можно использовать глобальное хранилище через vuex
  
• создать евент бас
  

  import Vue from 'vue'
  import App from './App.vue'
  
  export const serverBus = new Vue();
  
  new Vue({
   el: '#app',
   render: h => h(App)
  })

  
  
  
  
• передать client через пропс в дочерние
  
• ну и последние через this (я точно не помню какое там свойство, $root или $ref и еще как то, нужно посмотреть что есть в this дочернего компонента)