Pinia存储含Vue ref的类实例时调用方法报错如何解决？

架构老林

2026-9-1

问题原因

这个报错和Pinia的自定义逻辑无关，核心是Pinia的state会被Vue的reactive()整体包装为响应式代理，而Vue响应式代理默认会自动解包对象上挂载的ref属性：

你手动new出来的原始Foo实例没有经过代理，访问实例上的field拿到的是完整的ref对象，调用.value赋值完全正常
把实例赋值给Pinia state后，state.foo已经是响应式代理对象，此时访问field属性会直接返回ref内部存的字符串值，不再是ref实例。执行setField时this.field是字符串'bar'，给字符串加value属性自然会抛出类型错误。

你猜测的自动解包逻辑是存在的，但这层逻辑来自Vue响应式系统本身，不是Pinia单独加的处理。

解决方案

方案1：标记实例跳过响应式代理（推荐）

如果你自己已经在类内部用ref维护了响应性，不需要Pinia/Vue再给实例套一层代理，可以在赋值给state时用Vue内置的markRaw标记实例，告诉响应式系统不要对这个对象做代理转换：

import { markRaw } from 'vue'

const state = useState()
state.foo = markRaw(foo)

处理后从state中取出的foo就是你最初创建的原始实例，内部ref不会被解包，类方法可以正常调用，内部ref的响应性也不会丢失，模板中依然可以正常渲染更新。

方案2：修改类方法兼容解包逻辑

如果你需要Pinia追踪这个实例的变化，不想跳过代理，可以修改类中操作ref的逻辑，同时兼容代理解包和原始实例两种场景：

import { isRef } from 'vue'

class Foo {
    constructor() {
        this.field = ref('')
    }

    setField(value) {
        if (isRef(this.field)) {
            this.field.value = value
        } else {
            this.field = value
        }
    }
}

这种方案需要给所有操作内部ref的方法加判断，侵入性较强，除非你明确需要Pinia代理这个实例，否则优先选第一种方案。