I'm using Vue3 with the composition API and Pinia. I want to avoid tight coupling but sometimes I don't know the best place for the logic.

To give you some examples, I'm choosing Minesweeper ( I hope everyone knows it )

  • Imagine there is a board store holding the grid of cells. Based on this store you have a Grid component rending Cell components. When clicking (left or right mouse button) on a cell would you add store functions like revealCell, flagCell, ... keep the logic there and call those functions inside each cell? Or bubble the events up to the Grid component first? So each cell would emit an event e.g. @left-clicked / @right-clicked. I personally would keep all the validation logic ( you can't reveal a cell if it's flagged ) inside the store to have a central place... but disable the event emitter based on a computed property.

  • You can have a boardConfiguration and board store to decouple the concerns. It's possible to tightly couple the board store to the configuration so when calling initializeBoard it simply reads the configuration. But you could also pass in the values from the configuration so the board store doesn't know about the configuration. But what about placing the mines after the first revelation? Where would you listen on that and start placing the mines? And should the board store even be responsible for that?

I know this might not be a real world app example but I hope someone wouldn't mind giving some advice where to put the logic and how to separate the concerns :)

Thanks in advance!


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.