It seems that many people are attempting to utilize Vue without incorporating a store. Are you one of them? Is it because the store is not an integral part of Vue? Or maybe because the documentation focuses more on parent-child communication, events, etc. (which can be complex) rather than state management (which may seem simpler)? Could it be that object-oriented programming has affected our thinking?
Vue is designed to communicate with a store. The concept behind bidirectional binding is to separate state from markup. The brilliance in this approach lies in the fact that many items of state have multiple representations on the screen, like an array of items. Your store, even if it's just a basic JavaScript object within the window scope, should hold all the state of your page at any given moment. You should be able to easily transfer the store across pages and see the same content displayed. The key attributes of a store include...
- There should only be one store.
- You should 'normalize' your store so each item of state is stored only once, with minimal dependencies between different items of state.
Your items array should reside in the store, serving as the 'single source of truth' for both components. If you're using third-party components, you may need to pass certain properties to establish a connection, but these properties act as bridges between leaf components and your store. Your items represent the state, which ideally shouldn't be embedded within Vue components. Does this clarify things for you?