父组件修改Props时Pinia状态值同步变化的问题求助

你遇到的核心问题是引用类型的浅拷贝导致的意外双向绑定。因为Pinia Store中存储的value是数组（属于引用类型），当你将它传递给父组件并赋值给computedValue时，二者指向的是同一个内存地址的数组实例。所以无论是修改父组件的computedValue，还是Store里的value，都会同步影响到另一方。

1. 传递值时创建副本，切断引用 #

在子组件emit值的时候，不要直接传递原数组，而是创建一个数组副本，这样父组件拿到的就是独立的数组，不会和Store状态共享引用：

<!-- Child component 修改后 -->
<script setup>
const store = servicesStore()
const value = store.getValue
</script>

<template>
  <button @click="$emit('setValue', [...value])">传递值</button>
</template>

如果数组包含嵌套对象，建议用JSON.parse(JSON.stringify(value))做深拷贝，避免嵌套引用的问题。

2. 父组件接收时也保持独立 #

确保父组件的computedValue赋值的是副本，而不是直接接收引用：

<!-- Parent component 修改后 -->
<script setup>
let computedValue = []
const handleSetValue = (value) => {
  // 创建副本赋值，切断和子组件传递值的引用
  computedValue = [...value]
}
</script>

<template>
  <ChildComponent :values="computedValue" @setValue="handleSetValue"/>
</template>

3. 优化Store的Getter（可选） #

让Store的getter直接返回状态的副本，从源头避免外部直接修改原状态：

// Store 修改后
export const servicesStore = defineStore('services', {
    state: () => ({ 
        value: []
    }),
    getters: {
      getValue: (state) => { 
            return [...state.value] // 返回数组副本，而非原数组引用
      }
    },
    // ... 其他代码不变
})

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