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

Question

[Дилик Пулатов]

Здравствуйте!
В Вю как сделать глобальные переменные и метод или как использовать свою методы или переменные в любом компоненте?
например у меня есть в main.js

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

как я могу использовать globalVar и myGlobalMethods где угодно?
и ещё у меня в App.vue стоить такое же переменные и методы, как я могу их использовать в любом компоненте чтобы занова не писать? (а так же могу изменить значения переменные в другой компоненте?)

Answer 1

[Artem0071]

vuex

Answer 2

[Evgeny Kulakov]

Можно вообще вот так организовать:

Файл хранилища:

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

Внедрение хранилища во Vue:

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

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

Обращение в любом компоненте:

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

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

Answer 3

[Vladimir Zhosan]

this.$root.globalVar в любом компоненте

Comments

[Дилик Пулатов]

и метод тоже так можно использовать?

[Vladimir Zhosan]

Дилик Пулатов: Хмм, затрудняюсь ответить, но .. если метод требуется часто и в разных компонентах, то предлагаю его просто поместить в отдельный модуль , таким образом и глобальный файл не будет засорён какими-то методами.

Answer 4

[Дилик Пулатов]

итак есть такая идея
создал хелпер файл типа helper.js

export default {
  install(Vue, options) {
    Vue.prototype.$myMethod = function (methodOptions) {
      console.log('hello from my plugin')
    },
    Vue.prototype.getPost = () => {
      console.log("jnfjknfdjkngkjdfngjkndfjg");
    }
  }
}

а потом в main.js

import MyPlugin from './helper'
Vue.use(MyPlugin)

и все....
теперь в любой компоненте можно использовать вот так

Comments

[Klein Maximus]

Проще было использовать глобальную примесь.

[Дилик Пулатов]

Klein Maximus, ну это было давно...я щяс использую миксин вместо плагин....оно релаьно круто работает

Vue.mixin({
  methods: {
  myFunc(){
    return 45 + 635 * 2433;
  }
}
})

и этот функция работает везде)

Answer 5

[nzy]

Самое простое:

window.globalVar = "I am global";

И потом в компоненте просто использовать globalVar.

Comments

[Игорь]

Это не будет работать в режиме ssr

Answer 6

[MaxVilson]

Можно написать функции и переменные при инициализации Vue и обращаться к ним через $root. Например:
@click="$root.myGlobalMethods"