javascript - Two components binding Vuejs

Question

How would be perfect to organize data and interaction between two vuejs components? For example: 1) i have one component

item(v-for="item in items)
 a {{item.name}}

2) and the second

card(v-for="item in items")
 div.content
  img {{item.photo}}
  div {{item.desc}}
  button Details

The main idea is when i click on list item i want to toggle the card with the same id, as list has. I use one file conponent management from vue webpack template.

Answer 1

A lot of folk seem to be trying to use Vue without a store. Could you be one of them? Perhaps because the store is not strictly part of Vue? Perhaps because the docs spend more time on parent-child communication, events etc (complicated) than on state management (simple)? Perhaps because OO has rotted our brains?

Vue wants to talk to a store. The whole point of bidirectional binding is to separate state from markup. The whole reason why this is such a genius idea is that many (most?) items of state have more than one representation on screen, like your items array. Your store, which can be as simple as a js object in window scope, should contain all your page state at a given moment. You should be able to copy-paste the store between pages, and be looking at the same thing on screen. The important qualities of a store are...

• that there's only one of them.
• that you 'normalize' your store so that an item of state is only stored once, and there are minimal dependencies between items of state.

Your items array should be in the store, and both components refer to this 'single source of truth'. If you're using other people's components, then you'll need to feed them some properties, but properties are for creating tunnels through Vue components to link leaf components with your store. Your items are your state, and state shouldn't generally live in Vue stuff. Does that help?