[Vuejs]-My mutations aren't working! How do I correct this?

0👍

A few thoughts.

Firstly, this line:

this.initBreakfastMenu;

You aren’t actually calling the method. It should be:

this.initBreakfastMenu();

Next problem is this:

...mapGetters(['getBreakfastMenu']),

The line itself is fine but it’s inside your methods. It should be in the computed section.

You haven’t included any sample data for state.menu but it’s also worth noting that initBreakfastMenu won’t do anything unless there is suitable data inside state.menu. I suggest adding some console logging to ensure that everything is working as expected there.

SET_BREAKFAST_MENU, SET_LUNCH_MENU and SET_DINNER_MENU are all modifying state.breakfastMenu. I would assume that this is incorrect and each should be modifying their respective menu.

I would also note that using local data for breakfastArray is suspicious. Generally you’d just want to use the store state directly via the computed property rather than referencing it via local data. This is not necessarily wrong, you may want to detach the component data from the store in this way, but keep in mind that both are referencing the same array so modification to one will also affect the other. You aren’t taking a copy of the array, you’re just creating a local reference to it.

You should also consider whether you actually need the 4 menu types within your state. If breakfastMenu, lunchMenu and dinnerMenu are all just derived from menu then you’d be better off just implementing those using getters. getters are the store equivalent of computed properties and can contain the relevant filtering logic to generate their value from state.menu.

0👍

initBreakfastMenu is an action and you may want to use this.initBreakfastMenu()

Leave a comment