如何将PINIA商店与V-For指令使用，同时保持其反应性？

Question

我有一个类似于以下代码段的PINIA数据存储，该代码段存储了用户信息和他下达的个别订单列表：

order.js

import { defineStore } from 'pinia'
import { reactive } from 'vue'

export const useOrderStore = defineStore('order', {
  state: () => ({
    username: '',
    orders: reactive([
      { 
        id: '',
        item: '',
        price: ''
      }
    ])
  }),
})

我也使用V-For指令来渲染该组件应显示单个订单

ordersComp.vue

<template>
<div class="orders_container">
    <div v-for="(order, index) in orders" :key="order.id">
      <OrderComp />
    </div>
</div>
</template>

<script>
import { storeToRefs } from 'pinia'
import { useOrderStore } from "@/store/order";
 setup() {
    const { orders } = storeToRefs(useOrderStore())
    return { orders };
  },
</script>

我如何访问儿童组件ordorcomp中个体订单的商店数据，

我基本上想要这样的东西： ordercomp.vue

<div>
  <p>{{ orders.id }}</p>
  <input v-model="orders.item" />
  <input v-model="orders.price" />
</div>

<script>
import { storeToRefs } from 'pinia'
import { useOrderStore } from "@/store/order";
 setup() {
    const { orders } = storeToRefs(useOrderStore())
    return { orders };
  },
</script>

仍然保持其反应性状态？儿童组件如何知道要修改的订单数组的哪个顺序？我应该/应该将PINIA数据存储与将数据从父母传递到子女的道具相结合吗？ （尽管对我来说这似乎有些不对劲，因为Pinia可能能够替换组件之间的所有数据），并且由于项目和价格与输入字段界约定，因此它们当然应该根据用户输入动态更改。

Answer 1

基于 estus flasks 评论我通过将事件从child ordorcomp发射到parent ordersComp以及每个更改中，从而使它起作用。它调用了一个函数，该函数将我的订单数组在数据存储中的正确索引中进行了修改。

因此，按照上面的示例，我做了这样的事情：

order.js

import { defineStore } from 'pinia'
import { reactive } from 'vue'

export const useOrderStore = defineStore('order', {
  state: () => ({
    username: '',
    orders: reactive([
      { 
        id: '',
        item: '',
        price: ''
      }
    ])
  }),

  actions: {
    modifyOrder (id, order) {
      var foundIndex = this.orders.findIndex(elem => elem.id == order.id)
      this.orders[foundIndex] = order
      }
   }
})

orderscomp.vue

<template>
<div class="orders_container">
    <div v-for="(order, index) in order_store.orders" :key="order.id">
      <OrderComp @change="order_store.modifyOrder(index, order)"
        v-model:itemProp="order.item"
        v-model:priceProp="order.price"
      />
    </div>
</div>
</template>

<script>
import { useOrderStore } from "@/store/order";
export default {
 setup() {
    const order_store = useOrderStore()
    return { order_store };
  },
}
</script>

注意：我在此处使用包装函数来发出输入，但是您可以当然，EG直接通过 @input/ @canse

ordercomp.vue

<div>
  <input v-model="item" />
  <input v-model="price" />
</div>

<script>
import { useModelWrapper } from "@/modelWrapper";
export default {
  name: "OrderComp",´
  props: {
    itemProp: { type: String, default: "" },
    priceProp: { type: String, default: "" },
  },
emits: [
    "update:itemProp",
    "update:priceProp",
  ],
  setup(props, { emit }) {
    return {
      item: useModelWrapper(props, emit, "itemProp"),
      price: useModelWrapper(props, emit, "priceProp"),
    };
  },
}

modelwrapper.js

import { computed } from "vue";
export function useModelWrapper(props, emit, name = "modelValue") {
  return computed({
    get: () => props[name],
    set: (value) => emit(`update:${name}`, value),
  });
}