How do you access a property from one component in Vue?

• 0
  Vue 2.x, Webpack, application built on single file components. I can't figure out how Webpack puts it all together.
  
  The task is as follows. I wanted to make a wrapper ( load function) over the 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 couldn't find a way to do it.
  
  Then I decided to add this function as a method to the main App.vue file. When I write code for Selector.vue in the IDE (PyCharm), it finds 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 can one component refer to a property or method of another? If I wrote everything in one file (I did it before), then it could be done.
  
  var vm = new Vue (...)
  
  and then have access everywhere through vm . And here it just says:
  
  

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

  
  
  I don't understand how it works ...
  
  And how do you correctly make this wrapper so that you can use it anywhere in the application? There was a thought to use storage: put load in storage and call it like this. $ Store.load () . Will it be Feng Shui or is it a crutch?

  JavaScript Sean Shepard, Feb 2, 2019

---

1 Answers
• 0
  Plugins

  Vivienne Wilson

---