What is the best way to store the data in the lowest common ancestor for effective communication among multiple identical components within a sibling network?

Question

What is the best way to store the data in the lowest common ancestor for effective communication among multiple identical components within a sibling network?

My Background:

I have expertise in Python and Vue development, with a history of using Vue dating back to 2016.
One of my clients operates a business focused on weight loss and meal planning: clients pay her for weekly single-page PDF menus that outline their daily breakfast, lunch, and dinner choices. (example menu)
- Each meal is detailed with a list of ingredients.
Currently, she creates these menus using Excel, and I have been tasked with replicating and expanding this functionality into a Python/Vue application.
The application I am developing for her includes multiple "pages" or top-level components where she can manage clients, ingredients, recipes, as well as define meals for each day of the week through a complex UI component called WeeklyMenu.vue.
WeeklyMenu.vue consists of seven child components called DailyMenu.vue, one for each day of the week (Monday, Tuesday, etc.).
Each DailyMenu.vue component contains four Meal.vue components representing the meal types: Breakfast, Lunch, Dinner, and Snacks.
Note: Currently, the data within the DailyMenu.vue and Meal.vue components are self-contained rather than being accessed from a Vuex store.
- For example, the ingredient lists for each meal are contained within the Meal.vue component's data attribute. This leads to numerous HTTP requests sent to retrieve individual meal data upon page load instead of fetching all data at once through a Vuex action.

The Issue:

The challenge arises as the client requires features wherein a change in one subcomponent should reflect in another subcomponent.
- Specifically, she wants the app to synchronize changes made to common recipes across different meals of the week. For instance, modifying an ingredient in one meal should update other meals containing the same recipe.

Question:

What would be the best approach to address this scenario? Should I move ingredient data to the Vuex store or consider a hierarchical approach by storing it within the parent WeeklyMenu.vue component? How should this implementation work efficiently - with separate variables for each meal or a unified object encompassing all meal data?

If utilizing separate variables, passing every meal's ingredients as props to each meal seems inefficient. How can changes in one meal only affect similar meals?

Related Resources:

Communication between sibling components in VueJs 2.0
- I am exploring the option of elevating ingredient data to the level of the WeeklyMenu.vue component following the "Lowest Common Ancestor" approach outlined here and here.

Example Scenario:

Without Vuex: https://codepen.io/NathanWailes/pen/zYBGjME
Using Vuex: https://codepen.io/NathanWailes/pen/WNxWxWe
State maintained in Vuex but lacks proper propagation: https://codepen.io/NathanWailes/pen/KKMYNVZ

javascript vue.js vuejs2 vuex state-management

Answer 1

Answer №1

A robust problem domain necessitates the utilization of Vuex, as relying on component data sharing via props is not scalable enough
Store each Recipe as an object within a singular recipes object to avoid the need for watchers and enable Vue to re-render only relevant components upon changes
Establish a "weekly menu" object within the store structure
Utilize references (by name or unique ID) in the leaf nodes (Meals) of the weekly menu object to connect with recipes, allowing multiple instances of Meal.vue components to automatically update when using the same object from the store

Answer 2

A robust problem domain necessitates the utilization of Vuex, as relying on component data sharing via props is not scalable enough
Store each Recipe as an object within a singular recipes object to avoid the need for watchers and enable Vue to re-render only relevant components upon changes
Establish a "weekly menu" object within the store structure
Utilize references (by name or unique ID) in the leaf nodes (Meals) of the weekly menu object to connect with recipes, allowing multiple instances of Meal.vue components to automatically update when using the same object from the store

Answer 3

Answer №2

After successfully implementing a simple example in CodePen, I plan to use it as a reference while working on integrating the actual site.

The key takeaway from this solution is that Vue will recognize and update changes within nested elements of a Vuex state object without any manual intervention. This means you can store all data in a single Vuex store object, especially when dealing with multiple identical sibling components that should respond to each other.

You can view the CodePen demo here: https://codepen.io/NathanWailes/pen/NWRNgNz

Screenshot

https://i.sstatic.net/R43zo.png

Overview of the CodePen Example

All menu data originates from a single weeklyMenu object within the Vuex store, divided into separate day and meal objects.
Each meal features computed properties with both get and set functions for retrieving and updating data from the store.
The DailyMenu and WeeklyMenu components retrieve their collective data through computed properties that iterate over the Vuex weeklyMenu object seamlessly.
To ensure consistency among same-named meals, a mutation in the Vuex store iterates through the meals and updates those sharing matching "Ingredient Name" values.

The code

HTML

<html>
  <body>
    <div id='weekly-menu'></div>
    <h3>Requirements:</h3>
    <ul>
      <li>Each row should have all the numbers in it summed and displayed ('total daily calories').</li>
      <li>The week as a whole should have all the numbers summed and displayed ('total weekly calories').</li>
      <li>If two or more input boxes have the same text, a change in one numerical input should propagate to the other same-named numerical inputs.</li>
      <li>Ideally the data (ingredient names and calories) should be stored in one place (the top-level component or a Vuex store) to make it more straightforward to populate it from the database with a single HTTP call (which is not simulated in this example).</li>
    </ul>
  </body>
</html>

JavaScript

// JavaScript code goes here

Answer 4

After successfully implementing a simple example in CodePen, I plan to use it as a reference while working on integrating the actual site.

The key takeaway from this solution is that Vue will recognize and update changes within nested elements of a Vuex state object without any manual intervention. This means you can store all data in a single Vuex store object, especially when dealing with multiple identical sibling components that should respond to each other.

You can view the CodePen demo here: https://codepen.io/NathanWailes/pen/NWRNgNz

Screenshot

https://i.sstatic.net/R43zo.png

Overview of the CodePen Example

All menu data originates from a single weeklyMenu object within the Vuex store, divided into separate day and meal objects.
Each meal features computed properties with both get and set functions for retrieving and updating data from the store.
The DailyMenu and WeeklyMenu components retrieve their collective data through computed properties that iterate over the Vuex weeklyMenu object seamlessly.
To ensure consistency among same-named meals, a mutation in the Vuex store iterates through the meals and updates those sharing matching "Ingredient Name" values.

The code

HTML

<html>
  <body>
    <div id='weekly-menu'></div>
    <h3>Requirements:</h3>
    <ul>
      <li>Each row should have all the numbers in it summed and displayed ('total daily calories').</li>
      <li>The week as a whole should have all the numbers summed and displayed ('total weekly calories').</li>
      <li>If two or more input boxes have the same text, a change in one numerical input should propagate to the other same-named numerical inputs.</li>
      <li>Ideally the data (ingredient names and calories) should be stored in one place (the top-level component or a Vuex store) to make it more straightforward to populate it from the database with a single HTTP call (which is not simulated in this example).</li>
    </ul>
  </body>
</html>

JavaScript

// JavaScript code goes here

What is the best way to store the data in the lowest common ancestor for effective communication among multiple identical components within a sibling network?

Answer №1

Answer №2

Screenshot

Overview of the CodePen Example

The code

HTML

JavaScript

Similar questions

When you click, you will be directed to the specific details of the object

Problem arises with chai-http middleware when employing dynamic imports in chai 5.1.1 version

Utilizing Node.js and Express alongside EJS, iterating through objects and displaying them in a table

Pop-up windows, the modern day digital version of fortune cookies

Tips for correctly loading all elements on an HTML page before making CSS modifications

Angular 2 - Graphic Representation Tool for Visualizing Workflows and Processes - Resource Center

Angular ng-repeat can sometimes lead to annoying flickering on the webpage

Rearrange Material UI styles in a separate file within a React project

Do closures truly behave like objects, or are they something else entirely? (It appears not)

Retrieve the native interface from the Puppeteer browser/page context

After removing an item, Vue's computed property stops working

Exploring the use of barcodes with node.js

Discovering specific keywords within HTML tags and performing replacements using jQuery

Preventing simultaneous AJAX requests with a single click

Send both file and model data using AngularJS with FormData

Deactivate a chosen anchor button when clicked within a loop of elements

I'm really struggling to get this angularJS ng-repeat to function properly

Extract rotation values of X, Y, and Z from a Matrix4 in three.js

Customize the Vuetify 2.0 sass variable $heading-font-family

Enhance the standard input control in Vue.js by extending it to include features such as