Struggling to find the right way to structure my Vuex store for a particular issue.
In my store, I have an array of buttons or actions, totaling in the hundreds. Here's how they are currently organized:
buttons: [
{
text: 'Button 1',
doAction (store) {},
mustShow (store) {
return state.variable > 10 && state.variable2.counter < 12 && !state.variable3
}
}
...
]
Displaying them in the view and linking their actions to the click event is a breeze:
<button v-for"button in buttons" @click="button.doAction()"></button>
The challenge lies in the fact that each button's visibility is determined by complex, unique logic within its mustShow function. Each button has its own distinct criteria.
To only show buttons that meet their display criteria, I can create a getter like this:
availableActions (state) {
return state.buttons.filter(s => s.mustShow())
}
Although this solution works initially, the problem arises when the getter is non-reactive because it's tied to the result of a function rather than reactive state variables.
How should I reorganize the code to address this issue? While consolidating all button display logic into a single getter is an option, what if I also need the button names to be dynamic based on certain state variables?
Your insights would be greatly appreciated. Thank you.