Как задать глобальные методы в Vue?

Question

[Шаров Дмитрий]

Подскажите как задать глобальные методы в vue.js
Так что бы я потом мог их использовать в любом модуле
Как для вывода информации
<p>{{ globalMetodName(param1, param2) }}<p>
Так и в методах модуля

modeleMetod: function(){
    this.globalMetodName(param1, param2);
}

Answer 1

[Evgeny Kulakov]

Также можно использовать механизм примесей: https://ru.vuejs.org/v2/guide/mixins.html

Создаете объект примеси:

// определяем объект примеси
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('привет из примеси!')
    }
  }
}

И далее его можно инжектить в любой компонент или глобально:
Vue.mixin(myMixin)

Comments

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

Здравствуйте!
например я создал один метод в main.js

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  methods:{
  	myMethod(params){
  		// code
  	}
  }
})

как я могу сделать её глобальный метод чтобы использовать её в любом месте чтобы занова не писать ...например в какой нибудь компоненте?

<template>
  <div>
    <button @click="myMethod(params)">click</button>
  </div>
</template>

[Evgeny Kulakov]

Ответ как бы выше..

var myMixin = {
methods:{
  	myMethod(params){
  		// code
  	}
  }
}

Vue.mixin(myMixin)

Answer 2

[wostex]

Сделать плагин. Пример: https://jsfiddle.net/wostex/63t082p2/45/

<div id="app">
  <p>{{ helloText }}</p>
</div>

const mylib = {
    hello : (text1, text2) => { 
    	return `Hello! ${text1} ${text2}`
    },
    install: function(Vue){
      Object.defineProperty(Vue.prototype, 'mylib', {
        get () { return mylib }
      })
    }
};

Vue.use(mylib);

new Vue({
    el: '#app',
    data: {
    	helloText: mylib.hello('one', 'two')
    }
});

Можно вызывать методы в любом компоненте как `this.mylib.hello(...)`

Comments

[Шаров Дмитрий]

из шаблона вызывать {{ $auth.setToken() }} ?

[wostex]

Добавил пример в ответ.

Answer 3

[Антон Болтнев]

А чем плохи mapActions (в нижней части страницы) и mapGetters (в нижней части страницы) ? Если конечно, вы используете Vuex в проекте.