Как передать данные из компонента VueJS в main.js?

Question

Можно ли отправить данные, определенные в компоненте в методе data (), в файл main.js (или там, где определен экземпляр Vue)?Я думал, что смогу использовать vueX для выполнения следующих действий, но понятия не имел, как подойти к нему даже после понимания вычисленных реквизитов, геттеров и мутаций:

Data in Component -> Store -> Main.js

---

РЕДАКТИРОВАТЬ: КАК Я УСТАНАВЛИВАЮДАННЫЕ В VUEX STORE FROM COMP?

Представьте, что в хранилище есть свойство currentList, значения которого необходимо вводить из списка в Component1.vue.Как мне отправить этот список в VueX Store?

Answer 1

Если вы хотите передать данные из вашего компонента в хранилище Vuex $, вам следует использовать мутации (или действия, если данные поступают в ваш компонент асинхронно).

Предполагается, что ваша мутация уже определена вхранилище (и хранилище настроено правильно), вы можете вызвать его из своего компонента следующим образом:

this. $ store.commit ("YOUR_MUTATION", "data") *

Я рекомендую vue-tools в вашем браузере, чтобы отслеживать, что находится в вашем магазине.

Answer 2

Я не знаю Vue, но я думаю, что я понял, что вы ищете.То, чего вы пытаетесь достичь здесь, в любой другой интерфейсной среде, можно назвать как: «связь компонента с родителем».

У вас может быть вложенный компонент 4-го уровня, и вы хотите передать некоторые данныев файл Main.js (который, я полагаю, в Vue все еще является компонентом, а точнее корневым)

Как я вижу, вы можете использовать $ emit: https://forum.vuejs.org/t/passing-data-back-to-parent/1201 В React (и выэто можно сделать и в Vue, но вы должны выбрать решение в стиле vue) вы бы использовали функцию обратного вызова: родительский элемент передает дочернему элементу функцию, которую дочерний элемент может вызвать для установки определенного свойства внутри родительского компонента.

В наши дни другим распространенным вариантом, который полностью исключает такую ​​связь, является использование библиотеки управления состоянием, такой как Redux.Так как каждый компонент может получить доступ к глобальному хранилищу (которое подобно глобальной переменной), и после того, как компонент 4-го уровня установит свойство в этом глобальном хранилище, main.js сможет прочитать его.