Как использовать собственные методы хранения в svelte?
Я делаю модальное окно, атрибуты которого хранятся в магазине. Вместо того, чтобы открывать его вот так, из элемента: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) =>
), но ничего не вернуть.
1 ответ
Аргумент передан writable
содержит только данные, а не методы. Чтобы создать собственный магазин, сделайте это, как в этом руководстве - создайте собственную фабрику магазина, которая обертывает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