如何在 svelte 中使用自定义存储方法？

Question

我正在制作模态，其属性存储在商店中。而不是像这样打开它，从一个元素：on:click={() => $modal.isOpen = true}

我想这样打开： on:click={() => $modal.toggle()} 来自一个元素。

这是我的代码：

export const modal = writable({
    isOpen: false,
    title: 'Title',
    content: 'Content',
    toggle: () => {
        console.log(modal)
        modal.set({ ...modal, isOpen: true });
    }
});

当我记录 modal 时，它只记录 set, subscribe, update 方法。然后，当我再次单击时，那些方法消失了：它正确地覆盖了它们，似乎我永远无法获得模态的初始化状态。我尝试使用 this 或参数 ((a, b) =>) 访问当前对象，但 return 什么都没有。

Answer 1

传递给writable的参数只包含数据，不包含方法。要创建自定义商店，请像 this tutorial 那样操作 — 创建您自己的包装 writable:

的商店工厂

const toggleable = initial => {
  const store = writable(initial);

  return {
    ...store,
    toggle: () => store.update(n => !n)
  };
};

const modal = toggleable(false);

此处演示：https://svelte.dev/repl/682ef8309f924ba7ad8de1e2f5069988?version=3.12.1

如何在 svelte 中使用自定义存储方法？

How to use custom store methods in svelte?

svelte

svelte-store

svelte-3