Estoy tratando de usar una tienda estatal Pinia para mantener un objeto que usa referencias Vue dentro de él.
El objeto es una instancia de esta clase (ejemplo simplificado):
class Foo { constructor() { this.field = ref('') } setField(value) { this.field.value = value } } const foo = new Foo foo.setField('bar') // all happy — no errors here(Uso ese tipo de objetos como registros de datos, y los campos deben ser referencias porque se representan en plantillas y los quiero reactivos).
Entonces, defino una tienda Pinia y le configuro el objeto:
const useState = defineStore('main', { state: () => { return { foo: null } } }) const state = useState() state.foo = fooAhora, cuando trato de operar en el objeto que lo recuperé de la tienda, obtengo:
state.foo.setField('baz') // this fails with the error TypeError: Cannot create property 'value' on string 'bar' Lo que supongo que sucede aquí es que Pinia elimina la referencia de la propiedad de field en el objeto foo cuando se accede desde la tienda. ¡Pero diablos, no necesito eso! Quiero que el objeto foo se comporte de manera consistente sin importar de dónde se recupere.
¿Alguna idea de cómo hacerlo? Veo que Pinia tiene un método llamado skipHydrate que podría ser sobre esto, pero no puedo encontrar cómo usarlo.
Pinia utiliza internamente la API de composición de Vue y comparte su comportamiento.
Como dice la documentación ,
La conversión reactiva es "profunda": afecta a todas las propiedades anidadas. Un objeto reactivo también desenvuelve profundamente cualquier propiedad que sea referencia mientras mantiene la reactividad.
También se debe tener en cuenta que no se realiza el desenvolvimiento de la referencia cuando se accede a la referencia como un elemento de una matriz reactiva o un tipo de colección nativa como Map.
Para evitar la conversión profunda y solo retener la reactividad en el nivel de raíz, use en su lugar el método "shallowReactive()".
Para mantener intacta la instancia de clase, se puede usar markRaw :
state: () => { return { foo: markRaw(new Foo()) } } Puede ser innecesario usar explícitamente la API de composición como ref en la implementación de la clase; en cambio, la instancia de clase se puede hacer reactiva tal como está con reactive(new Foo()) con excepciones notables (explicadas aquí y aquí ).