Vuex: dealing with nested data

[jdittrich]

The examples and documentation show how to deal with flat data. For more advanced applications, vuex users may need to deal with nested data though. An example for such a structure would be the vue.js included "tree" demo.

How should vuex used with such nested data?

In redux, it seems to be most often recommanded to "flatten" the structure manually or using normalizr, sometimes in conjunction with reselect to ease retrieval.

[yyx990803]

It depends. The "flatten" from normalizr is typical for data coming from REST endpoints, e.g. posts that has authors and comments, etc. You can totally use normalizr with Vuex - in fact the chat example does use a "flattened" structure which is similar to the data structure produced by normalizr.

On the other hand, tree structure data is usually less commonly seen, and in some cases it may be easier to keep the original structure. Or, you can use the same flat structure and use ids to reference nested items, and use a Vuex getter in each tree item component to retrieve its children.

Vuex getters basically already does what reselect does for Redux, both from data retrieval and performance perspectives.

[jdittrich]

Thanks! That greatly helps along!
Would it make sense to refer to this in the docs? It may be helpful for others (In an FAQ section?)

[yyx990803]

Sure, feel free to open a PR