Quiero usar una tienda Pinia en un componente de mi aplicación Vue y no puedo entender por qué la tienda debe devolverse en { }. ¿Cuál es la diferencia entre return {foo} y return foo ?
import { usePiniaStore } from "../stores/mainStore"; export default { setup() { const piniaStore = usePiniaStore(); return { piniaStore }; // why isn't it 'return piniaStore' ? }, };Realmente no se trata de Pinia, sino de lo que Vue espera como valor de retorno de la función setup() . Espera un objeto. Si intenta devolver algo más, Vue le da un error.
// this will give you an error "setup() should return an object. Received: number" <script> import { defineComponent } from 'vue' export default defineComponent({ setup() { let myVariable = 10 return myVariable } }) </script>La razón de esto es que Vue necesita iterar las propiedades del objeto devuelto (para que conozca tanto el valor como su nombre) y crear propiedades con los mismos nombres en la instancia del componente (para que sean accesibles en la plantilla). Esto es importante.
El código de tu ejemplo:
return { piniaStore }en realidad es lo mismo que:
// creating new JS object const returnObject = { // first is property name // second is property value (from existing variable) piniaStore: piniaStore } return returnObject... y es un código válido desde el punto de vista de Vue
Lo importante para recordar es que solo las propiedades del objeto devuelto son accesibles desde la plantilla
// you can do this BUT only inner properties of the "myObject" will be accessible in the template <script> import { defineComponent } from 'vue' export default defineComponent({ setup() { let myObject = { variableA: 10, variableB: "some string" } return myObject } }) </script> Usar <div v-if="variableA"> funcionará. Usar <div v-if="myObject"> no lo hará.
Las tiendas de Pinia son en realidad objetos, por lo que devolverlos directamente desde la configuración (sin envolverlos en otro objeto) probablemente sea legal y funcione. Pero todo lo anterior todavía se aplica. Su plantilla no tiene acceso a piniaStore solo a las propiedades (estado o captadores) y funciones (acciones) definidas en esa tienda piniaStore
Esto se llama destrucción de objetos. Si un módulo devuelve varios objetos, es decir, {foo, goo, loo} y desea elegir solo un foo. puedes usar return {foo} . Pero si el módulo devuelve solo un objeto foo, puede usar return foo . https://www.javascripttutorial.net/es6/javascript-object-destructuring/