Reactive property is not propagating to component in Vue 3 app-CodePudding

I have a Vue 3 app. I am trying to setup a store for state management. In this app, I have the following files:

app.vue
component.vue
main.js
store.js

These files include the following:

store.js

import { reactive } from 'vue';

const myStore = reactive({
    selectedItem: null
});

export default myStore;

main.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');

component.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>

app.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>

The idea is that the app manages state via a reactive object. The object is passed into the component via a property. The component can then update the value of the object when a user clicks the "Generate Item" button.

I can see that the selectedValue is successfully passed down as a property. I have confirmed this by manually setting selectedValue to a dummy value to test. I can also see that the onItemSelected event handler works as expected. This means that events are successfully flowing up. However, when the selectedItem is updated in the event handler, the updated value is not getting passed back down to the component.

What am I doing wrong?

CodePudding user response：

$store.selectedItem stops being reactive here, because it's read once in data:

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

In order for it to stay reactive, it should be either converted to a ref:

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

Or be a computed:

computed: {
  selectedItem() {
    return this.$store.selectedItem
  }
}