Estoy tratando de usar vuex para almacenar un valor que muestra/oculta un modal en un componente secundario. El componente secundario se representa varias veces por su componente principal en una lista. Sin embargo, el modal siempre muestra el último elemento de la lista y puedo ver que mi valor modal calculado de mi estado vuex se ejecuta la misma cantidad de veces que la cantidad de elementos en la lista.

Estado Vuex

 export default function () { return { currentProduct: {}, allProducts: [], editProductDialog: false }; }

mutaciones Vuex

 export const setEditProductDialog = (state, editProductDialog) => { state.editProductDialog = editProductDialog }

Componente principal:

 <div> <product v-for="product in allProducts" :key="product.id" :product="product" /> </div>

Componente hijo:

 <template> <div class="row justify-start"> <div class="col-6"> <q-item clickable v-ripple @click="runSetEditProductDialog"> <q-item-section avatar> <q-icon name="chevron_right" /> </q-item-section> <q-item-section class="text-body1">{{ name }}</q-item-section> </q-item> </div> <q-dialog v-model="editDialog" no-backdrop-dismiss> ... ... </q-dialog> </template> ... <script> export default { name: "Product", props: ["product"], data: () => ({ }), methods: { ...mapMutations({ setEditProductDialog: "product/setEditProductDialog" }), runSetEditProductDialog() { this.setEditProductDialog(true) }, }, computed: { ...mapState("product", ["editProductDialog"]), editDialog: { get() { console.log("in get") return this.editProductDialog; }, set(value) { console.log("in set") this.setEditProductDialog(value); }, }, }, }; </script>

Como dije, el cuadro de diálogo siempre muestra el último componente del product y puedo ver las declaraciones de impresión en mi sección calculada ejecutándose la misma cantidad de veces que la cantidad de elementos en allProducts .

¿Cómo uso correctamente vuex para almacenar el estado modal al representar una lista de componentes?