Dealing with nested/complex objects in vuex

Question

Is there someone familiar with Vuex and Vue.js that could help me with some code?

Either by handing me advice, or point me towards some similar situation to solve my problem.

I have a comment section (module: comments) representing an array of comment object. Each comment have a 'tags section', 'replies section', needing to be reactive on mutations and to store mutations in db.

• Option 1: having only one module: comments containing actions for all entities (comments, tags, replies) - would fill comments module with unrepresentative actions
• Option 2: having 'replies, tags' and asociated actions living as vue data of components 'replies section' and 'tags section'
• Option 3: described here https://forum.vuejs.org/t/vuex-best-practices-for-complex-objects/10143/2 , but I don't know if I need to have a module for each entity (comments, replies, tags)

with mention of that my API returns nested object:

`comments:[
  {
    id,
    title,
    text,
    replies: [{
      id,
      author: {id, name}
      comment_id,
      text
    }],
    tags: [similar with replies]
  },
//
]`

Answer 1

If you have a lot of relational/nested data, I'd suggest trying vuex-orm. It allows you to normalize your data schema within Vuex Store with relationships, as you would represent it in regular DB. It also has a lot of integrations with axios, GraphQL, etc.