Скачать или смотреть How to Filter Nested Arrays in Vuex without Mutating State

Learn how to implement Vuex getters to filter nested arrays effectively while adhering to Vuex's state management principles.
---
This video is based on the question https://stackoverflow.com/q/65251075/ asked by the user 'Rhodes73' ( https://stackoverflow.com/u/7031847/ ) and on the answer https://stackoverflow.com/a/65251640/ provided by the user 'Maciej Kwas' ( https://stackoverflow.com/u/4230636/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: VUEX Getter = Filter array inside array

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding Vuex and Getters

When working with state management in Vue applications, Vuex serves as the foundational library that enables developers to maintain a single source of truth for the application state. But sometimes, manipulating this state can lead to confusion, especially when it comes to working with complex data structures, such as arrays nested within arrays.

One common issue developers face is filtering an array inside an array through a getter in Vuex. However, the process can lead to unexpected warnings and errors, such as:

[[See Video to Reveal this Text or Code Snippet]]

This warning occurs when you inadvertently attempt to modify the state directly within a getter, which is not allowed. Let’s explore this in detail and see how you can effectively filter nested arrays without breaking state management principles.

The Problem: Attempting to Modify State Inside Getters

Consider a scenario where you have an array of companies, and each company contains an array of people. If you want to filter the people based on their jobId, you might be tempted to modify the original nested array directly within the getter like this:

[[See Video to Reveal this Text or Code Snippet]]

While the above code may seem logical at first glance, it violates Vuex's core principle of immutability. Getters are meant to transform or compute derived state but not to alter it. Doing so can lead to side effects and an unstable application state.

The Solution: Returning Transformed Copies Instead

To appropriately filter the people within companies based on your criteria without mutating the state, you can leverage the map function and return a new array that only contains the filtered results. Here's how you can implement this correctly:

Step-by-Step Implementation

Use map to iterate through the companies: The map function allows us to create a new array by applying a function to each element in the existing array.

Destructure company objects: As you iterate, you'll want to return new company objects that include all original properties and then apply further transformations to the people property.

Filter within the nested people array: Use the filter method on the people array to return only those individuals that meet your specified criteria (e.g., jobId === 1 in this case).

Here's the revised code that follows these principles:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

company.companies.map(c => ({...c, ...})) creates a new array of companies based on the existing ones.

...c spreads all properties of each company into the new object.

people: c.people.filter(p => p.jobId === 1) replaces the people property with a new filtered array that only includes individuals with jobId equal to 1.

Conclusion

By understanding the importance of immutability within Vuex and leveraging methods like map and filter, you can efficiently retrieve and manipulate data without triggering Vuex's warnings about state mutations. Always remember that getters should merely return derived or transformed data rather than modifying it directly.

If you stick to these guidelines, your state management in Vuex will be robust, maintainable, and free of unpleasant surprises. Happy coding!