Vue中遍历后Pinia对象丢失响应性问题排查

核心原因 #

1. 嵌套对象未被深度响应式处理：balanceCategories用ref([])声明，axios返回的普通对象数组赋值后，内部的balance_item并非响应式对象。父组件模板中直接修改能触发更新是因为模板的依赖追踪机制，但子组件修改props对象属性时，无法触发Pinia的状态更新。
2. Inertia useForm的隔离特性：将props.balanceItem传入useForm后，Form实例会克隆原对象属性并维护独立的响应式状态，修改form属性不会自动同步回Pinia的原对象。
3. 违反单向数据流规范：子组件直接修改props对象属性，虽不属于替换props，但不符合Vue设计规范，且因响应性缺失无法触发Pinia状态更新。

解决方案 #

1. 确保Pinia嵌套对象的深度响应性 #

修改Pinia Store，将axios返回的普通对象转为深度响应式：

// UseCategoryItemsStore.js
import {defineStore, ref, reactive} from "pinia";

export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => {
    const balanceCategories = ref([])
    const totals = ref([])

    function getBalanceItems() {
        axios.get(route('balance-item.index')).then((response) => {
            // 递归将嵌套对象转为响应式
            balanceCategories.value = response.data.map(category => 
                reactive({
                    ...category,
                    balance_items: category.balance_items.map(item => reactive(item))
                })
            )
        })
    }

    // 保留原有其他方法...
    getTotals()
    getBalanceItems()

    return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals}
})

2. 实现useForm与Pinia状态双向同步 #

不要直接传入props到useForm，而是基于Pinia状态创建表单，并监听表单变化同步回Pinia：

<!-- BalanceItem.vue -->
<script setup>
import {watch} from "vue";
import {useForm} from "@inertiajs/vue3";
import NumberInput from "@/Components/NumberInput.vue";
import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js";

const categoryItemStore = UseCategoryItemsStore()
const props = defineProps({balanceItem: Object, errors: Object})

// 基于Pinia状态初始化表单
const form = useForm({
    id: props.balanceItem.id,
    count: props.balanceItem.count,
    amount: props.balanceItem.amount,
    total: props.balanceItem.total,
    name: props.balanceItem.name
})

// 监听表单变化，同步回Pinia
watch(form, (newForm) => {
    categoryItemStore.balanceCategories.forEach(category => {
        const targetItem = category.balance_items.find(item => item.id === newForm.id)
        if (targetItem) {
            targetItem.count = newForm.count
            targetItem.amount = newForm.amount
            targetItem.total = newForm.count * newForm.amount
        }
    })
}, {deep: true})

const emit = defineEmits(['update-balance-item'])

const submit = () => {
    form.post(route('balance-item.update'), {
        preserveScroll: true,
        onSuccess: () => emit('update-balance-item')
    })
}
</script>

3. 优化Pinia状态更新方法 #

在Store中添加专门的更新方法，统一处理状态修改：

// UseCategoryItemsStore.js
function updateBalanceItem(itemId, updates) {
    balanceCategories.value.forEach(category => {
        const targetItem = category.balance_items.find(item => item.id === itemId)
        if (targetItem) {
            Object.assign(targetItem, updates)
            targetItem.total = targetItem.count * targetItem.amount
        }
    })
    getTotals() // 更新统计数据
}

// 导出新增方法
return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals, updateBalanceItem}

子组件中调用该方法替代手动修改：

// BalanceItem.vue的watch回调中
watch(form, (newForm) => {
    categoryItemStore.updateBalanceItem(newForm.id, {
        count: newForm.count,
        amount: newForm.amount
    })
}, {deep: true})

注意事项 #

• 禁止在模板中直接修改状态（如父组件的{{ balanceItem.total = 500 }}），需通过Pinia方法修改。
• 严格遵循单向数据流规范，子组件通过调用Pinia方法或emit通知父组件修改状态，避免直接操作props。

内容的提问来源于stack exchange，提问作者Ivar