Pinia中非可写Ref在服务端渲染时的处理问题

问题背景

在Pinia状态管理库的使用过程中，开发者Jamie4224报告了一个关于服务端渲染(SSR)时出现的错误："proxy set handler returned false for property"。这个问题特别出现在使用Nuxt.js框架配合Pinia进行服务端渲染时，当尝试对计算属性进行重新导出时发生。

问题现象

具体表现为：当开发者尝试通过storeToRefs方法从一个store中导出计算属性，然后在另一个store中重新导出这些属性时，在客户端hydration(水合)阶段会出现上述错误。虽然页面初始能正确显示计算属性的值("abc")，但随后控制台会报错。

技术分析

根本原因

这个问题源于Pinia v2.2.5版本中的一个变更，该变更加强了对响应式属性的处理。当使用storeToRefs导出计算属性时，实际上创建了一个对计算属性的引用。计算属性本质上是只读的(getter-only)，当Pinia尝试在hydration阶段对这些属性进行写操作时，就会触发代理拦截器的错误。

相关技术点

1. 计算属性的不可变性：Vue的计算属性设计上是只读的，不能直接修改其值
2. storeToRefs工作原理：这个方法会为store中的每个属性创建ref引用
3. SSR hydration过程：服务端渲染时，Vue需要在客户端"复活"服务端生成的状态

解决方案

官方建议

Pinia核心维护者posva明确指出：当从store中返回ref时，它必须是可写的。对于计算属性，正确的做法是直接使用computed而不是通过toRef或storeToRefs来提取。

具体修复方案

对于原问题中的代码，应该避免使用storeToRefs来导出计算属性，而是应该直接访问原始store的计算属性：

export const useSecondaryStore = defineStore('secondaryStore', () => {
    const testStore = useTestStore();
    
    // 直接访问计算属性而不是通过storeToRefs
    const testComputed = computed(() => testStore.testComputed)

    return {
        testComputed
    }
})

临时解决方案

如果确实需要保持原有代码结构，可以使用Pinia提供的skipHydrate方法来跳过hydration过程：

const testComputed = skipHydrate(computed(() => "abc"))

最佳实践建议

1. 避免跨store直接导出计算属性：计算属性应该在其所属的store中定义和使用
2. 明确区分可写和只读状态：在设计store时，清楚地标记哪些状态是可写的，哪些是只读的
3. 谨慎使用storeToRefs：这个方法更适合用于导出普通响应式状态，而非计算属性
4. 考虑SSR兼容性：在使用Pinia与Nuxt等SSR框架时，要特别注意hydration过程可能带来的问题

版本兼容性说明

这个问题在Vue 3.5.0-alpha.2中不会出现，但在Vue 3.5.0-alpha.3及更高版本中会出现。这表明Vue核心团队在响应式系统方面做出了更严格的限制，开发者需要适应这些变化。

通过理解这些原理和解决方案，开发者可以更好地在SSR环境中使用Pinia，避免类似问题的发生。