import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    blockquote: "blockquote",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "Stores sind Solids Antwort auf verschachtelte Reaktivität. Sie sind Proxy-Objekte, deren Eigenschaften verfolgt werden können und selbst Objekte enthalten können, die automatisch in Proxies verpackt werden, und so weiter."
    }), "\n", jsx(_components.p, {
      children: "Um Dinge leichtgewichtig zu halten, erzeugt Solid die darunterliegenden Signale nur für Eigenschaften, auf die innerhalb des reaktiven Kontextes zugegriffen wird. Und so sind alle Signale in Stores je nach Nutzung verzögert erstellt."
    }), "\n", jsxs(_components.p, {
      children: ["Der ", jsx(_components.code, {
        children: "createStore"
      }), "-Aufruf nimmt den initialen Wert und gibt ein Getter-/Setter-Tupel ähnlich wie Signal zurück. Das erste Element ist der Store-Proxy, der nur lesbar ist und das zweite ist eine Setter-Funktion."]
    }), "\n", jsx(_components.p, {
      children: "Die Setter-Funktion nimmt in ihrer einfachsten Form ein Objekt, desssen Eigenschaften mit dem gegenwärtigen Zustand zusammengeführt werden. Sie unterstützt auch die Pfad-Syntax, so dass wir verschachtelte Updates machen können. Auf diese Weise können wir die Kontrolle über die Reaktivität behalten, aber gleichzeitig zielgerichtet aktualisieren."
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsx(_components.p, {
        children: "Solids Pfad-Syntax hat viele Formen und enthält eine mächtige Syntax, um Iterationen und Bereiche zu handhaben. Die API-Dokumentation enthält eine vollständige Referenz."
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Schauen wir mal, wie viel einfacher es ist, verschachtelte Reaktivität mit einem Store zu erreichen. Wir können die Initialisierung unserer Komponente wie folgt ersetzen:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [store, setStore] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createStore"
        }), "({ ", jsx(_components.span, {
          className: "hljs-attr",
          children: "todos"
        }), ": [] });\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "addTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "text"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setStore"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'todos'"
        }), ", ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "todos"
          }), ") =>"]
        }), " [...todos, { ", jsx(_components.span, {
          className: "hljs-attr",
          children: "id"
        }), ": ++todoId, text, ", jsx(_components.span, {
          className: "hljs-attr",
          children: "completed"
        }), ": ", jsx(_components.span, {
          className: "hljs-literal",
          children: "false"
        }), " }]);\n};\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "toggleTodo"
        }), " = (", jsx(_components.span, {
          className: "hljs-params",
          children: "id"
        }), ") => {\n  ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "setStore"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'todos'"
        }), ", ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "t"
          }), ") =>"]
        }), " t.", jsx(_components.span, {
          className: "hljs-property",
          children: "id"
        }), " === id, ", jsx(_components.span, {
          className: "hljs-string",
          children: "'completed'"
        }), ", ", jsxs(_components.span, {
          className: "hljs-function",
          children: ["(", jsx(_components.span, {
            className: "hljs-params",
            children: "completed"
          }), ") =>"]
        }), " !completed);\n};\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Wir benutzen nun die Pfad-Syntax des Stores mit Funktions-Settern, die es uns erlaubt, den vorherigen Zustand zu bekommen und den neuen innerhalb verschachtelter Wert zurückzugeben."
    }), "\n", jsx(_components.p, {
      children: "Und das war's. Der Rest des Templates ist bereits granular reaktiv (Schau in die Console, während die Checkbox geklickt wird)."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=lesson-6f296a8f.js.map
