Как передать данные между компонентами и их предками с различными состоянием и обратно в Vuex.store?

Question

[Sergey]

Есть компонент, который в виде таблицы выводит список заказов. Каждая строка таблицы (заказ), это отдельный компонент. Внутри компонента-заказа лежат еще несколько компонентов. Один из них, это компонент-кнопка. При нажатии на кнопку, загорается иконка и в окне браузера появляется окошко со списком выбранных заказов. При нажатии на это окошко, заказы формируются и выводятся на печать.

Примерное расположение компонентов:

<main-component />
   <order-component />
      <order-id-component />
      <order-delivery-component />    
      <order-print-component />  
   <order-component />
    ...
   <order-component />
    ...
   <order-component />
    ...
<choosed-orders-component />

Все это дело работает через Vuex.store
Внутри лежит кнопка. При нажатии на эту кнопку, номер заказа должен добавиться в массив Vuex.state.choosedOrders и автоматом выводится в

Я не понимаю, как мне сделать, чтобы при нажатии кнопки, в массив в store добавился номер заказа. Потому что в компоненте с кнопкой нет номера заказа. Причем список заказов и список выбранных заказов - это разные массивы данных.

Как вариант, можно передавать в компонент значение номера заказа ( ), а дальше передавать в store.actions при нажатии кнопки номер заказа и состояние (вкл/выкл) кнопки. Но правильно ли это?

Надеюсь получилось объяснить. Остальное в комментариях.

Comments

[Алексей Скляров]

Пользовательские события

[Sergey]

Алексей Скляров, я про v-model хотел написать, но потом удалил текст. Как быть с внутренними механизмами компонента? Например если не кнопка, а select будет, который изменяет статус заказа и если внутри компонента своя логика еще другая. И опять же, v-model к чему привяжется? к массиву с данными о заказе? эти данные загружаются с бэкэнда и состояние всегда берется с бэкэнда, а та же кнопка для печати заказа она чисто виртуальная. Перебирать массив данных заказа и добавлять свойство для кнопки чтобы потом подключить это как модель? Но все-равно надо из модели вытаскивать события, не проще ли тогда просто передавать номер заказа в компонент, а он напрямую в Vuex.store передает свое состояние? В общем я начал варианты пробовать с v-model, но не думаю, что это решение правильнее.