另一个组件完成发布后，组件内部的Sapper / Svelte更新状态

问题描述

我知道this q&a，但仍无法在我的情况下应用。

我正在使用sapper，它有两个组件。 Component2用于为菜单创建选项或类别。 Component1显示包含所有选项/类别的菜单。另外，component1在其主体中包括component2。

我的问题是，当我使用component1并单击保存时，一切正常（输入数据已保存到db），现在component1需要反映刚刚创建的新选项/类别，但它不知道更改。单击“保存在component2中”后，如何使我的component1（显示所有类别）知道更改/更新/新类别？

Component2代码： createcategoy.js工作正常，并将数据发布到我的数据库中，所以这不是问题。

<script>
...code to get locationid unrelated to my issue

function createcategory(event){
  let categoryorder = event.target.categoryorder.value
  let categoryname = event.target.categoryname.value
  let categorydescription= 
   event.target.categorydescription.value

 
  fetch('createCategory',{
  method: 'POST',credentials : 'include',headers: {
  'Accept': 'application/json','Content-type' : 'application/json'
  },body: JSON.stringify({
  
  location_id : locationid,category_order : categoryorder,category_name : categoryname,category_description :categorydescription
  })
  }).then(response => response.json())
  .then(responseJson => {
  console.log("All Is Well. Category created 
      successfully")
  })
  .catch(error => console.log(error));

  
  }

</script>
html form...

现在是component1，它显示位置，每个位置都有由component2创建的自己的类别：

  <script>     
     import { onMount } from 'svelte';
     import { goto } from '@sapper/app';
     import Createcategory from './createCategory.svelte'

     let locations = []
     onMount(async () => {

     fetch('menubuilder',{
     method: 'POST',headers: {
     'Accept': 'application/json','Content-type' : 'application/json'
     },body: JSON.stringify({

     })
     }).then(response => response.json())
     .then(responseJson => {
     locations = responseJson.info
     })
     .catch(error => console.log(error));

     }) //onMount fn
   
   </script>  

    <h1> Menu Builder </h1>
         
    <dl>
    
      {#each locations as location}

  
       
        <br>
    <h1>{location.locationname} </h1>
        <p>{location._id} </p>
          

   <!-- This is component2 where I use to create new 
      category-->
  <Createcategory locationname= 
  {location.locationname} locationid={location._id}/>
  </dt>
  
  
  <dd> 
            
     {#each location.locationcategories as item}
     <div >       
       <p>{item.categoryname} </p>: 
       {item.categorydescription}
       
     </div>
     {/each}
      
        
  
  {/each}

</dl>

现在，我唯一的挣扎是精工/苗条状态的工作方式。提交创建类别的component2时，如何使component1更新为状态/域。

我阅读了文档中的反应性部分，location变量在component1内分配，而component2是负责创建新类别的变量。

那么，当component2将类别保存到db时，我该怎么做来更新component1（位置变量及其dom）？

解决方法

有两种常见的方法可以做到这一点：

发布新类别后，
1. 引发事件，您的新工作流程将类似于：

Component2推送到服务器
Component2引发事件categoryAdded，其中类别作为有效负载。 Component1通过将给定类别添加到其数组来对此事件做出反应。

或者，在我看来，这是一种更好的方法：

1. 将类别添加到两个组件之外的商店中。

Component1将仅显示商店的内容。
Component2会将新商品推入商店。

商店本身将负责从服务器获取数据或将数据推送到服务器。 这有两个额外的好处：

• 这些组件仅与显示类别有关，不在乎它们来自何处或去向何处。
• 您可以轻松更改类别的存储方式，使用的终结点，...