Currently seeking advice on managing state in a real-time messaging/chat app created with VueJS 2.
The application is made up of multiple components as shown in the diagram below:
https://i.sstatic.net/VGTo8.png
Up to this point, I have successfully implemented the display of (fake) conversations. Each conversation object is stored in an array within the App component and passed to child components through props, which works seamlessly.
Now, I am faced with handling actions/mutations from deeply nested components within the hierarchy. For instance, sending a message and adding it to the appropriate messages array.
I initially thought I could simply dispatch a global event from the AppConversationChatWindowInput component and handle it in the App component. However, I soon realized that this feature was removed with the introduction of Vue 2.0 in favor of Vuex. This change left me questioning its necessity, as there are situations where this approach would be suitable for event management.
I see a few potential solutions:
Passing the websocket connection to each child component. While technically possible, this strategy feels suboptimal. The App connecting to the websocket server and passing the connection down via props to all child components may lead to a convoluted and difficult-to-maintain architecture. In my view, only the App should be aware of the websocket connection details.
Manually propagating the event through each component in the hierarchy. Although feasible, this method introduces complexity and increases the likelihood of errors. It complicates the maintenance process unnecessarily.
Utilizing a global event bus. While a viable option, relying on a global event bus for an input field seems excessive. Unnecessary dependencies and coupling can make testing and debugging more challenging.
Employing a global data store (Vuex). Similar to #3, introducing Vuex adds another layer of complexity and dependency. Moreover, if opting for Vuex, determining how data is accessed by components becomes crucial. Should data be passed down through components or directly fetched from the store deep in the component hierarchy? This approach may result in components holding more information than necessary.
Any insights or recommendations on the most effective way to manage state in this scenario?