Svelte中无法访问Map类型Store中的值

我太懂你遇到的这个坑了！用Map作为Svelte store的时候，{#each}明明循环次数和Map里的元素数一致，但就是拿不到对象里的name、age这些属性对吧？

问题出在Map的迭代器特性上：当你直接在{#each}里用$items的时候，它迭代出来的不是单个的值对象，而是一个个[键名, 值对象]的数组。你之前的代码里直接访问item.name，相当于在数组上找name属性，自然拿不到结果。

给你几个实用的解决办法：

方法一：只迭代Map的值 #

把Map转换成值的数组，用Array.from($items.values())就能直接拿到所有值对象：

<script>
    import {items} from "./store.js"

    $items.set("one", { name: "John", age: 50 })
    $items.set("two", { name: "Jack", age: 25 })
</script>

<h1>Hello!</h1>
{#each Array.from($items.values()) as item}
    <div>name: {item.name}</div>
{/each}

方法二：同时获取键和值 #

如果需要用到Map的键名，可以直接解构迭代出来的键值对数组：

{#each $items as [key, item]}
    <div>键名：{key}，姓名：{item.name}</div>
{/each}

方法三：派生一个值数组的Store（进阶） #

如果你的组件经常需要用到Map里的值数组，可以在store里派生一个只读store，避免每次都手动转换：

// store.js
import {writable, derived} from "svelte/store"

const items = writable(new Map())
// 派生一个只存值数组的store
export const itemValues = derived(items, $items => Array.from($items.values()))
export {items}

然后在组件里直接用这个派生store：

<script>
    import {items, itemValues} from "./store.js"

    $items.set("one", { name: "John", age: 50 })
    $items.set("two", { name: "Jack", age: 25 })
</script>

<h1>Hello!</h1>
{#each $itemValues as item}
    <div>name: {item.name}</div>
{/each}

试试上面的方法，应该就能正常访问到Map里的值啦！

备注：内容来源于stack exchange，提问作者Manny