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

Question

我知道但仍然无法在我的情况下应用它。

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

我的问题是当我使用 component1 并点击保存时，一切正常（输入数据保存到数据库）现在 component1 需要反映刚刚创建的新 option/category 但它不知道更改.单击组件 2 中的保存后，如何让我的组件 1（显示所有类别）知道 changes/update/newcategory？

组件2代码： createcategoy.js 工作正常并且 post 数据到我的数据库，所以这不是问题。

<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',
     credentials : 'include',
     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>

现在，我唯一的挣扎是 sapper/svelte 状态如何运作。当我提交创建类别的 component2 时，如何使 component1 更新为 state/dom。

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

那么，当component2将类别保存到db时，我应该如何更新component1（locations变量及其dom）？

Answer 1

有两种常用的方法：

发起活动 发布新类别后，您的新工作流程将类似于：

Component2 推送到服务器
Component2 引发一个事件 categoryAdded 并将类别作为负载。 Component1 通过将给定类别附加到它的数组来对此事件作出反应。

或者，我认为更好的方法：

在两个组件之外的商店中添加您的类别。

Component1 将只显示商店的内容。
Component2 将向商店推送新商品。

商店本身将负责 getting/pushing 与服务器之间的数据。这有两个额外的好处：

组件只关心显示类别，不关心从哪里来，去哪里。
您可以轻松更改类别的存储方式、它使用的端点...

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

Sapper/Svelte update state inside a component after another component is done posting

sapper

svelte-3