Vuex - 如何使用 $store 在组件之间共享数据？

Question

我希望能够使用 $store 在组件之间（从父级到子级）共享对象属性。如何将

user_name

共享给子组件并能够在表格中看到它？

父组件：

<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: []
    }
}

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

methods: {
    async collectIds(){
      console.log("this.dataItems: ", this.dataItems)
      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})
      })
    }
}

子组件：

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