Как использовать собственные методы магазина в 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) =>), но ничего не вернул.


svelte svelte-3 svelte-store
person Vael Victus    schedule 29.10.2019    source источник

Ответы (1)


arrow_upward
6
arrow_downward

Аргумент, переданный writable, содержит только данные, а не методы. Чтобы создать собственный магазин, сделайте это как в этом руководстве - создайте собственную фабрику магазина, которая обертывает writable:

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

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

const modal = toggleable(false);

Демо здесь: https://svelte.dev/repl/682ef8309f924ba7ad8de1e2f50699.12 / а>

person Rich Harris    schedule 29.10.2019
comment
Спасибо, Рич! Я чувствую, что близок к этому, но я просто не могу правильно импортировать этот метод обновления. Показано здесь: svelte.dev/repl/a5457b36d46d48d4bb271852cf6d0cf6d0c8 всевозможные вещи между двумя показанными примерами (и другими), но кажется, что если я когда-нибудь получу update (), то что-то еще сломается. - person Vael Victus; 31.10.2019
comment
store.update принимает функцию, а не значение. Функция получает старое значение и возвращает новое. Так должно быть store.update(old => ({ ...old, isOpen: !old.isOpen })) - person Rich Harris; 31.10.2019