Estoy migrando mi aplicación vue 2 a vue 3. Leí la propiedad calculada en vue 3 con la API de composición.
Aquí está la propiedad calculada de vue 2 para proporcionar algunos datos comunes a diferentes componentes. Mi pregunta es cómo migrar la propiedad computada vue 3 usando la API de composición con getters y setters.
sharingDataInComponents() { let obj={}, objProperty = Object.defineProperty; // variable objProperty(obj, 'size' , {get:()=>this.size}); objProperty(obj, 'shape' , {get:()=>this.shape}); objProperty(obj, 'navigation' , {get:()=>this.navigation}); objProperty(obj, 'addBtn' , {get:()=>this.addBtn}); // function objProperty(obj, 'onAddClick', {get:()=>this.onAddClick}); return obj; },¿Cómo migrar esto? Soy nuevo en la API de composición de vue 3.
Prueba como en el siguiente fragmento:
const { ref, computed } = Vue const app = Vue.createApp({ setup() { const size = ref(35) const shape = ref('cirlcle') const navigation = ref('left') const addBtn = ref(true) const onAddClick = () => {console.log('add')} const sharingDataInComponents = computed(() => { let obj={}, objProperty = Object.defineProperty; // variable objProperty(obj, 'size' , {get:()=>size.value}); objProperty(obj, 'shape' , {get:()=>shape.value}); objProperty(obj, 'navigation' , {get:()=>navigation.value}); objProperty(obj, 'addBtn' , {get:()=>addBtn.value}); // function objProperty(obj, 'onAddClick', {get:()=>onAddClick}); return obj; }) return { size, shape, navigation, addBtn, onAddClick, sharingDataInComponents } } }) app.mount('#demo') <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> <div id="demo"> <div @click="sharingDataInComponents.onAddClick"> {{ sharingDataInComponents.size }} </div> </div>