mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
2.6 KiB
JSON
17 lines
2.6 KiB
JSON
{
|
|
"id": "062f678266c330dda5494744",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "create-mutable",
|
|
"content": "---\ntitle: createMutable\nuse_cases: \u003e-\n mobx migration, vue compatibility, external system integration, mutable state\n patterns, proxy-based reactivity\ntags:\n - store\n - mutable\n - proxy\n - state\n - compatibility\nversion: '1.0'\ndescription: \u003e-\n Create mutable proxy stores with automatic deep tracking. Ideal for MobX/Vue\n compatibility or integrating external mutable systems.\n---\n\n`createMutable` creates a new mutable Store proxy object that provides a way to selectively trigger updates only when values change.\n\nBy intercepting property access, it allows automatic tracking of deep nesting via proxy making it useful for integrating external systems or serving as a compatibility layer with frameworks like MobX or Vue.\n\n```tsx\nimport { createMutable } from \"solid-js/store\"\nimport type { Store, StoreNode } from \"solid-js/store\"\n\nfunction createMutable\u003cT extends StoreNode\u003e(state: T | Store\u003cT\u003e): Store\u003cT\u003e;\n```\n\n:::note\n\tIt's important to recognize that a mutable state, which can be passed around and modified anywhere, may complicate the code structure and increase the risk of breaking unidirectional flow.\n\n\tFor a more robust alternative, it is generally recommended to use `createStore` instead.\n\tAdditionally, the [`produce`](/reference/store-utilities/produce) utility can provide many of these same benefits without the associated downsides.\n:::\n\n```tsx\nimport { createMutable } from \"solid-js/store\"\n\nconst state = createMutable({\n\tsomeValue: 0,\n\tlist: [],\n});\n\n// read value\nstate.someValue;\n\n// set value\nstate.someValue = 5;\n\nstate.list.push(anotherValue);\n```\n\nMutables support setters along with getters.\n\n```tsx\nconst user = createMutable({\n\tfirstName: \"John\",\n\tlastName: \"Smith\",\n\tget fullName() {\n\t\treturn `${this.firstName} ${this.lastName}`;\n\t},\n\tset setFullName(value) {\n\t\t[this.firstName, this.lastName] = value.split(\" \");\n\t},\n});\n```",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/reference/store-utilities/create-mutable.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/reference/store-utilities/create-mutable.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 1871,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "676abb2f203a5ecc0e252c2130eddd20c28546153cff88addc7ff702b73a64ef",
|
|
"timestamp": "2026-02-23T11:43:00.190779929+01:00"
|
|
} |