Updating state object using checkbox item - Vue.js

Question

I'm trying to keep update component using checkbox, so if the item is checked then the value should be added to the state item in VueX store.

In child component: childcomp.vue:

<q-item-section top>
  <q-checkbox v-model="chosen" :val="NameProp" color="teal" />
</q-item-section>

Then in parent comopnent I want to display which one are checked

parent.vue:

<childcomp NameProp="Item1"></childcomp>
<childcomp NameProp="Item2"></childcomp>
<childcomp NameProp="Item3"></childcomp>

<p> {{chosen}} </p>

So for example if I check first and last item I should be seeing:

["Item1","Item3"] and empty array if I uncheck them.

What is the easiest way to keep this value updated using VueX store?

Answer 1

Try to observe that array using watcher property and inside the handler dispatch the action :

watch:{
   chosen(newVal,oldVal){

    this.$store.dispatch('yourAction',newVal);

   }
}