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?