Vue.js Vue ChildComponent (GrandchildComponent) 应该更新 ParentComponent 的列表

我的分数是DocumentView.vue.该组件具有DocumentListingView.Vue组件.DocumentListingView.vue有一个DocumentItem.view组分.在DocumentItem.view组件中，可以(通过API调用)删除相应的文档.删除后，我希望更新DocumentListingView.vue.这意味着子元素必须告诉家长，请通过激发新的API调用来更新您的DocumentListingView.我知道，使用$emit和Pinia store，您可以实现子元素与父母之间的通信.但我只是不知道它在建筑上应该是什么样子.

Problem:我正在try 用Pinia来实现它.不幸的是，我不知道最后一步，如何更新 list 中的数据.

Question:什么是理论上的概念？子元素应该更新ParentView的列表吗？

下面你可以看到我用来做这个的文件.他们被减少到基本的:DocumentView.vue(父母)，DocumentListingView.vue(子元素)，DocumentItem.view(孙子)，FireData.js(皮尼亚)

DocumentView.vue

<script setup>
  import { ref, computed as compi, onMounted } from 'vue'
  import DocumentListing from './document/DocumentListingView.vue'
  import { useApiDataStore } from '@/stores/apiData';
  
  let list = {};
  const apiData = useApiDataStore(); // init stores for api call
  
  async function getDocumentList() {  
    await apiData.refreshDocumentList();
    list = await apiData.listData;
  }    
  
  getDocumentList();
</script>

<template>
  <div>
    <DocumentListing :documents="list"/>    
  </div>
</template>

DocumentListingView.vue

<template>
    <h2>Documents</h2>
    <div class="documentListing">        
        <div v-for="item in documents">
            <DocumentItem :data="item"></DocumentItem>        
        </div>        
    </div>
</template>

<script lang="ts" setup>
  import DocumentItem from '../../components/DocumentItem.view'

  defineProps({
    documents: Object,
  })

</script>

DocumentItem.view

<script setup>
    import { useApiDataStore } from '@/stores/apiData';

    defineProps({
        data: Object,
    });
    
    const apiData = useApiDataStore();
    const removeDocument = async (document) => {
      // api call to remove document
      apiData.refreshDocumentList();
    }
    
</script>

<template>
  <div>
  <button @click="removeDocument(data)">Delete Doument></button>
  </div>
</template>

FireData.js

import { defineStore } from 'pinia'

export const useApiDataStore = defineStore('apiData', {
    id: 'apiData',
    state: () => ({
        listData: {}
    }),
    actions: {
        async refreshDocumentList() {
            const endpoint = "http://localhost:8888/api.php?list";
            const response = await fetch(endpoint);
            const json = await response.json();          
            this.listData = json;
        }
    }
  })