如何使用 Vuex 将模态组件状态存储在子组件列表中？

Question

我正在尝试使用 vuex 在子组件中存储 shows/hides 模式的值。子组件由其父组件在列表中多次呈现。但是，模态总是显示列表中的最后一项，我可以看到我从 vuex 状态计算出的模态值运行与列表中元素的数量相同。

Vuex 状态

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

Vuex 突变

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

父组件：

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

子组件：

<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>

就像我说的，对话框总是显示最后一个 product 组件，我可以在我的计算部分运行中看到打印语句的次数与 [中的元素数量相同=16=].

渲染组件列表时如何正确使用 vuex 来存储模态状态？

Answer 1

而不是布尔值 true/false 尝试设置 id:

@click="runSetEditProductDialog(product.id)"

runSetEditProductDialog(id) {
  this.setEditProductDialog(id)
},

并在您计算的属性中进行比较：

return this.editProductDialog === this.product.id

如何使用 Vuex 将模态组件状态存储在子组件列表中？

How to use Vuex to store modal component state in child component list?

javascript

vue.js

quasar

vuex

vuejs2