Из всех решений наилучшими будет пара приемов, которые сводятся к выводу взаимодействий на глобальный уровень.
1) Как уже подсказали, event bus. Но лучше всего не так, как рекомендует документация, а на экземпляре $root. Например:
//один из компонентов сообщает, что надо что-то выполнить
methods: {
iChangeSomething(value) {
this.$root.$emit("something-changed", value)
}
}
//другой это выполняет силами своего метода
methods: {
somethingChanged(value) {
console.log({value})
}
},
created() {
this.$root.$on("something-changed", this.somethingChanged )
},
destroy() {
this.$root.$off("something-changed", this.somethingChanged )
}
2) Плагин, который "сшит" с компонентом, и транслирует его метод в глобальную область.
//определяем
//@/plugins/user.js
let doSomething = () => null
export default function install(Vue) => {
const MyComponent = {
name: "MyComponent ",
methods: {
doSomething() {
console.log("I'm doing something!")
}
},
created() {
doSomething = this.doSomething
},
render: function (createElement) {
//...
}
}
Vue.component('MyComponent', MyComponent)
Vue.prototype.$doSomething = doSomething
}
//подключаем
//main.js
import {VuePlugin as User} from "@/plugins/user"
Vue.use(User)
new Vue({ ...
//используем
methods: {
doSomething() {
this.$doSomething()
}
}
<!-- или так -->
<button @click="$doSomething">BUTTON</button>
Но здесь - один нюанс: придется прописывать render не тегами, а функциями.
Поэтому решение годно больше для некоего универсального пакета, который вы сможете потом повторно использовать в других проектах с минимальными изменениями.
Vuex - возможно, но не всегда уместно. Это инструмент работы с общими данными, он целесообразен в более-менее крупных проектах. Если стоит задача типа "чтобы от различных действий затемнялась общая панелька в UI", то лучше сделать панельку плагином, чем заводить ее свойства в store.
Средний
