Vuex - how to use $store to share data between components?

Question

I would like to be able to share object properties between components (from Parent to Child) using $store. How can I share user_name to Child component and to be able to see it in the table?

Parent Component:

<template>
    <div>
        <b-table :fields=“fields” :items=“dataItems”>
            <template v-slot:cell(items)=“row">
                    <child-component :itemsDetails="row.item.items”></child-component>
                </template>
        </b-table>
    </div>
</template>
computed: {
    ...mapState({
      dataItems: (state) => _.cloneDeep(state.dataItems.list),
    })
  },

data() {
    return {
        userIds: []
    
    }
}

created(){
    this.collectIds();
},

methods: {
    async collectIds(){
      this.dataItems.forEach((e, i) => {
        if(this.dataItems[i].items.user_id !== undefined){
          this.usersIds.push(this.dataItems[i].items.user_id)
        }
      });
      const { data } = await this.$api.get(‘user’s, {
        params: {
          id: this.userIds,
        }
        
      })
      this.user_name = data.data.map((user) => user.name).join(', ')

      this.dataItems.forEach((e, i) => {
        Object.assign(this.$store.state.dataItems.list[i].items, {user_name: this.user_name})
      })
    }
}

Child Component:

<template>
    <div>
        <b-table>
            <template #cell(user_id)="data">
                {{ data.item.user_name }}
                </template>
        </b-table>
    </div>
</template>