How in Vue from one component to access the property of another?

Question

JavaScript

Vue 2.x, Webpack, application is built on single file components. I can't figure out how Webpack collects all this.

The task is this. I wanted to make a wrapper ( load function ) over axios calls , for convenience. I wanted to put it in some my_lib.js so that I could access it from any component, but I could not find a way how to do it.

Then I decided to add this function as a method to the main App.vue file . When I write the code for Selector.vue in the IDE (PyCharm), it finds the links and highlights the tooltip, i.e. you can see that supposedly the load method from App.vue is available in Selector.vue .

main.js
---------------

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import vuetify from './plugins/vuetify'
import axios from 'axios'

Vue.config.productionTip = false
Vue.prototype.axios = axios

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

app.vue
---------------

<template>
...
</template>

<script>
import Selector from '@/components/Selector.vue'

export default {
  name: 'App',
  components: {
    Selector
  },
  methods: {
    load (command, { result, callback, data, method }) {
      this.axios({
        'site.com'
      }).then(response => {
        if (result) {
          result.data = response.data
          result.status = response.status
        }
      }).catch(error => {
        if (error.response) {
          if (result) {
            result.data = error.response.data
            result.status = error.response.status
          }
        } else if (error.request) {
          if (result) {
            result.error = error.message
          }
        }
      }).then(() => {
        if (callback) callback()
      })
    }
  }
}
</script>

selector.vue
--------------

<template>
  <div class="text-center">
    <v-menu offset-y>
      <template v-slot:activator="{ on }">
        <v-btn
          outlined
          x-small
          width="100%"
          v-on="on"
        >{{ $store.state.locale }}</v-btn>
      </template>
      <v-list>
        <v-list-item
          :value="$store.state.locale"
          v-for="(item,key) in messages"
          :key="key"
          @click="change_locale(key)"
        >
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
import { messages } from '@/assets/lang.js'

export default {
  name: 'Selector',
  data: () => ({
    messages: messages
  }),
  methods: {
    change_locale (key) {
      const result = {}
      this.load(
        '/set_lang',
        {
          result,
          data: { lang: key },
          callback: () => {
            if (result.success) {
              this.$store.dispatch('setLocale', key)
            }
          }
        }
      )
    }
  }
}
</script>

But when I execute, the browser displays:

[Vue warn]: Error in v-on handler: "TypeError: this.load is not a function"

How to refer from one component to a property or method of another? If you write everything in one file (I used to do this before), then you could do it and then have access everywhere through vm . And it just says:

var vm = new Vue(...)

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

I don't understand how it works...

And how to make this wrapper correctly so that you can use it anywhere in the application? There was an idea to use storage: put load in storage and call it like this.$store.load() . Will it be Feng Shui or is it a crutch?

Answer 1

Plugins