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: "Store 是 Solid 处理嵌套响应式给出回答。Store 是代理对象，其属性可以被跟踪，并且可以包含其他对象，这些对象会自动包装在代理中，等等。"
    }), "\n", jsx(_components.p, {
      children: "为了让事情变得简单，Solid 只为在跟踪范围内访问的属性创建底层 Signal。因此，Store 中的所有 Signal 都是根据要求延迟创建的。"
    }), "\n", jsxs(_components.p, {
      children: [jsx(_components.code, {
        children: "createStore"
      }), " 函数接收一个初始值并返回一个类似于 Signal 的读/写元组。第一个元素是只读的 store 代理，第二个元素是 setter 函数。"]
    }), "\n", jsx(_components.p, {
      children: "最基础的 setter 函数用法会接收一个对象，该对象的属性将与当前状态合并。setter 函数还支持路径语法，以便我们进行嵌套更新。通过这种方式，我们仍然可以保持对响应性的控制，以及精确定位更新。"
    }), "\n", jsxs(_components.blockquote, {
      children: ["\n", jsx(_components.p, {
        children: "Solid 的路径语法支持多种形式，包括一些强大的语法来进行迭代和范围。有关完整的参考，请参阅 API 文档。"
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "让我们看看使用 Store 实现嵌套响应性有多容易。我们可以用这个替换我们组件的初始化代码："
    }), "\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: "可以将 setter 函数配合 Store 的路径语法一起使用，setter 函数接收先前的状态并返回嵌套值的新状态。"
    }), "\n", jsx(_components.p, {
      children: "就是这样。模板的其余部分就能做出了精细的响应（在单击复选框时检查控制台）。"
    })]
  });
}
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-3b4d4d94.js.map
