How to make global variables and method in VueJs2?

Question

Vue.js

Hello!
In Vu how to make global variables and method or how to use own methods or variables in any component?
for example i have in main.js

new Vue({
  el: '#app',
  data:{
    globalVar: 'my variable',
  },
  methods:{
    myGlobalMethods(){
      // code
    }
  }
});

how can i use globalVar and myGlobalMethods anywhere?
and I also have the same variables and methods in App.vue, how can I use them in any component so as not to write again? (can I also change the values ​​of variables in another component?)

Answer 1

vuex

Answer 2

You can generally organize it like this:
Storage file:

// store.js
export default {
    a: 'foo',
    b: 'bar'
}

Implementing storage in Vue:

import Vue from 'vue'
import Store from './store'

new Vue({
  el: '#app',
  data: Store,
  render: h => h(App)
})

Appeal in any component:

<template>
    <div>{{$root.a}}</div>
</template>

<script>
import Store from './store'
export default {
  name: 'app',
  methods: {
    test () {
      this.$root.a = 'something value' 
    }
  }
}

Answer 3

this.$root.globalVarin any component

Answer 4

The simplest: And then in the component just use globalVar.

Answer 5

It is possible to write functions and variables during Vue initialization and access them via $root. For example:
@click="$root.myGlobalMethods"