Nested objects

[alexauvray]

Nice package !

How would it work if I want to commit the input value and the selected options in the Vuex store (without the "label" string so that the object I send matches my Vuex store object) ?

Template

                <div v-for="(section, indexSections) in sections" :key="indexSections">                                
                    <div v-for="(item, indexItem) in section" :key="indexItem">                      
                      <div>

                        <select
                          v-model="sections[indexSection][indexItem].options"                        
                          :options="selectOptions"
                        ></select>

                        <b-input
                          type="text"
                          v-model="sections[indexSection][indexItem].sectionItem"                                                   
                        ></b-input>
                        <b-button @click="removeItem({section,item})"/>  
                                    
                      </div>
                    </div>      
    
                  <div">
                    <b-button @click="addNewItem(section)"/>                                        
                    <b-button @click="addNewSection"/>
                  </div>

                </div>

Data

selectOptions: [
        {
          options: { option1: true, option2: true },
          label: "First"
        },
        {
          options: { option1: false, option2: true },
          label: "Second"
        }      
      ]

Computed

Computed: {

sections: {
      get() {
        return this.$store.state.sections;
      }
    }

Store

sections: [
                [{
                    sectionItem: "",
                    options: {
                        strict: true,
                        includes: true
                    }

                }]
            ],

[hl037]

Hello,
Sorry for the late answer, I was quite busy at work, and also at home so I didn't have the time to answer...

it's been somme time I haven't used this code (actually, since the new composition api, I find really little use (actually none ^^') to vuex...)

But to answer your question, the first possibility is a global data proxy with a single mutation that update the whole section array (quick to implement, poor performance if large number of sections / item.)

Second way, I would handle like this : I would create a mutation function that takes a section ID and new id data as parameter (as the example in the readme), and other mutations to add / remove section.
Then I would create another mutation function that would take an item id and a section id and new data for the item, in addition to a mutation that would add / remove items.

Then, in the .vue, I would put a computed property that returns an array of vueDataProxies for sections, each one with a fetch returning another vueDataProxy to the item.

Depending on the number of item, you could just update a whole section, or skip the first level, with a computed property that returns an array of array of data proxies

This package benefits mostly when you want to make reactive a big object. As of today, with the ref() and reactive() function from the composition-API, I think the right way would be to use these functions instead.

IMHO, the future of vue will be more functionality oriented : rather than having one store like vuex, it's really more manageable to have a custom store in a module, and simply import the module and do some useX() call to get access to it. This way, you can also create custom function on the fly to know which component accessed the stored and when. And that feels more powerful to me than Vuex

I hope the modest clues I gave you will help you, don't hesitate if you have other questions :)

Léo