Svelte如何从Data.svelte组件向Main组件的footerItems.left添加新对象

问题原因 #

你当前的实现存在两个核心问题：

• 你在Main.svelte中定义的footerItems是数组类型，第一层的第一个元素才是包含left/right属性的对象，直接写footerItems['left']是访问数组本身的left属性，返回undefined，调用push方法自然会报错
• 注意组件引用逻辑：如果Data是Main的子组件，应该在Main中导入Data并传递props，而不是反过来在Data里导入Main
• Svelte中直接调用数组的push方法无法自动触发响应式更新，需要额外的操作通知框架数据变化

解决方案 #

根据你的组件层级关系，可以选择以下两种实现方式：

方式1：直接通过props传递（适用于Data是Main的直接子组件） #

第一步：修改Main.svelte代码

<script>
 // 父组件导入子组件
 import Data from './Data.svelte';
 let footerItems = [
 {
  'left' : [
    {
      'id' : 'item #1',
      'value' : true 
    },
    {
      'id' : 'item#2',
      'value' : true 
    } 
  ],
  'right' : [
    {
      'id' : 'item#3',
      'value' : true
    }
  ]
 }
]
</script>

<!-- 把footerItems作为props传递给子组件 -->
<Data {footerItems} />

第二步：修改Data.svelte代码

<script>
export let footerItems;
let addData = {
    'id': 'map', 
    'value': false
};

// 方式A：用解构赋值新增元素，自动触发响应式
footerItems[0].left = [...footerItems[0].left, addData];

// 方式B：如果习惯用push方法，加一行手动赋值触发响应式
// footerItems[0].left.push(addData);
// footerItems = footerItems;
</script>

方式2：用全局Store（适用于两个组件无直接父子关系） #

第一步：新建存储文件store.js

import { writable } from 'svelte/store';

export const footerItems = writable([
  {
    left: [
      { id: 'item #1', value: true },
      { id: 'item#2', value: true }
    ],
    right: [
      { id: 'item#3', value: true }
    ]
  }
]);

第二步：在Main.svelte中使用Store

<script>
import { footerItems } from './store.js';
</script>

<!-- 访问Store数据加$前缀即可自动订阅更新 -->
{#each $footerItems[0].left as item}
  <div>{item.id}</div>
{/each}

第三步：在Data.svelte中更新Store

<script>
import { footerItems } from './store.js';
let addData = { id: 'map', value: false };

// 直接更新全局Store
footerItems.update(items => {
  items[0].left.push(addData);
  return items;
})
</script>

内容的提问来源于stack exchange，提问作者Števo Kelbel