• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

198
Views
La propiedad reactiva no se propaga al componente en la aplicación Vue 3

Tengo una aplicación Vue 3. Estoy tratando de configurar una tienda para la gestión estatal. En esta aplicación, tengo los siguientes archivos:

  • aplicación.vue
  • componente.vue
  • principal.js
  • tienda.js

Estos archivos incluyen lo siguiente:

tienda.js

 import { reactive } from 'vue'; const myStore = reactive({ selectedItem: null }); export default myStore;

principal.js

 import { createApp } from 'vue'; import App from './app.vue'; import myStore from './store'; const myApp = createApp(App); myApp.config.globalProperties.$store = myStore; myApp.mount('#app');

componente.vue

 <template> <div> <div v-if="item">You have selected an item</div> <div v-else>Please select an item</div> <button class="btn btn-primary" @click="generateItem">Generate Item</button> </div> </template> <script> export default { props: { item: Object }, watch: { item: function(newValue, oldValue) { alert('The item was updated.'); } }, methods: { generateItem() { const item = { id:0, name: 'Some random name' }; this.$emit('itemSelected', item); } } } </script>

aplicación.vue

 <template> <component :item="selectedItem" @item-selected="onItemSelected" /> </template> <script> import Component form './component.vue'; export default { components: { 'component': Component }, data() { return { ...this.$store } }, methods: { onItemSelected(item) { console.log('onItemSelected: '); console.log(item); this.$store.selectedItem = item; } } } </script>

La idea es que la aplicación gestione el estado a través de un objeto reactivo. El objeto se pasa al componente a través de una propiedad. Luego, el componente puede actualizar el valor del objeto cuando un usuario hace clic en el botón "Generar elemento".

Puedo ver que el selectedValue se transmite con éxito como una propiedad. He confirmado esto configurando manualmente selectedValue en un valor ficticio para probar. También puedo ver que el controlador de eventos onItemSelected funciona como se esperaba. Esto significa que los eventos fluyen correctamente . Sin embargo, cuando el elemento selectedItem se actualiza en el controlador de eventos, el valor actualizado no se vuelve a pasar al componente.

¿Qué estoy haciendo mal?

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

$store.selectedItem deja de ser reactivo aquí, porque se lee una vez en data :

 data() { return { ...this.$store } }

Para que permanezca reactivo, debe convertirse en una referencia:

 data() { return { selectedItem: toRef(this.$store, 'selectedItem') } }

O ser un calculado:

 computed: { selectedItem() { return this.$store.selectedItem } }
almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error