{"id":1368,"date":"2019-09-21T22:25:09","date_gmt":"2019-09-21T14:25:09","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1368"},"modified":"2022-02-17T15:09:47","modified_gmt":"2022-02-17T07:09:47","slug":"2020ironman-svelte-derived-store","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/09\/21\/2020ironman-svelte-derived-store\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY20- \u884d\u751f\u7684store"},"content":{"rendered":"

derived store<\/h1>\n

derived store \u662f\u751a\u9ebc\uff0c\u5728\u8aaa\u660e\u5b8cwritable store<\/a>\u8ddfreadable store<\/a>\u5f8c\u8981\u63a5\u8457\u5206\u4eab\u7684svelte store\u7cfb\u5217\u6587\u7ae0\u5c31\u662fderived store\u3002<\/p>\n

derived store \u662f\u751a\u9ebc<\/h2>\n

derived store \u7c21\u55ae\u8b1b\u5c31\u662f\u7531\u5176\u4ed6 store \u884d\u751f\u51fa\u4f86\u7684\u8cc7\u6599\u5167\u5bb9\uff0c\u6240\u4ee5\u5176\u7528\u9014\u5c31\u5f88\u660e\u78ba\uff0c\u5c31\u662f\u4f7f\u7528\u5728\u7576\u5ba3\u544a\u4e00\u500bstore\u5f8c\u6709\u53e6\u4e00\u500bstore\u6703\u56e0\u70ba\u524d\u9762\u4e00\u500bstore\u800c\u7522\u751f\u7684\u8cc7\u6599\u5167\u5bb9\u3002<\/p>\n

derived store \u600e\u9ebc\u7528<\/h2>\n

\u9019\u90e8\u5206\u53ef\u4ee5\u7528\u4e4b\u524dreadable store<\/a>\u7684time<\/code><\/code>\u4f8b\u5b50\u518d\u63a5\u7e8c\u4e0b\u53bb\uff0c\u9996\u5148\u6211\u5011\u5148\u56de\u9867\u4e4b\u524d\u7684\u4f8b\u5b50\u3002<\/p>\n

<!--App.svelte-->\n<script>\n    import { time, elapsed } from '.\/stores.js';\n\n    const formatter = new Intl.DateTimeFormat('en', {\n        hour12: true,\n        hour: 'numeric',\n        minute: '2-digit',\n        second: '2-digit'\n    });\n<\/script>\n\n<h1>The time is {formatter.format($time)}<\/h1>\n<p>\n    This page has been open for\n    {$elapsed} {$elapsed === 1 ? 'second' : 'seconds'}\n<\/p><\/code><\/pre>\n
\u9019\u88e1\u6211\u5011\u65b0\u5bb6\u4e00\u500b\u9700\u6c42\uff0c\u5c31\u662f\u986f\u793a\u4e00\u500b\u7d93\u904e\u591a\u5c11\u79d2\u7684\u5167\u5bb9\uff0c\u7576\u7136\u76f4\u63a5\u8dd1\u6703\u58de\u6389\u5f97\uff0c\u56e0\u70ba\u9084\u6c92\u5be6\u4f5c elapsed<\/code>\u3002<\/p>\n
derived store \u7684\u5be6\u4f5c<\/h2>\n
\u5728\u5be6\u4f5c elapsed<\/code> \u4e4b\u524d\u5148\u8907\u7fd2\u4e00\u4e0breadable store<\/a>\u7684 time<\/code> \uff0c\u76f8\u95dc\u5167\u5bb9\u5982\u4e0b\u3002<\/p>\n
\/\/ stores.js\nimport { readable } from 'svelte\/store';\n\nexport const time = readable(null, function start(set) {\n    const interval = setInterval(() => {\n        set(new Date());\n    }, 1000);\n\n    return function stop() {\n        clearInterval(interval);\n    };\n});<\/code><\/pre>\n
\u63a5\u4e0b\u4f86\u6211\u5011\u8981\u5be6\u4f5c elapsed<\/code> \u4e86\uff0c\u9019\u6642\u6211\u5011\u6703\u7528\u5230 derived<\/code> \u9019\u51fd\u5f0f\uff0c\u800c\u9019\u51fd\u5f0f\u4e5f\u9700\u8981\u5f9e svelte\/store<\/code> import\u9032\u4f86\uff0c\u5be6\u4f5c\u7684\u5167\u5bb9\u5982\u4e0b\u3002<\/p>\n
\/\/ stores.js\nimport { readable, derived } from 'svelte\/store';\n\nexport const time = readable(new Date(), function start(set) {\n    const interval = setInterval(() => {\n        set(new Date());\n    }, 1000);\n\n    return function stop() {\n        clearInterval(interval);\n    };\n});\n\nconst start = new Date();\n\nexport const elapsed = derived(\n    time,\n    $time => Math.round(($time - start) \/ 1000)\n);<\/code><\/pre>\n
derived<\/code>\u7684\u7b2c\u4e00\u500b\u53c3\u6578\u662f\u53c3\u8003\u7684store\u7269\u4ef6\uff0c\u7b2c\u4e8c\u500b\u53c3\u6578\u662f\u7576\u53c3\u8003\u7684store\u8b8a\u66f4\u6642\u7684callback\uff0c\u9019\u908a\u662f\u8a08\u7b97\u6642\u9593\u5dee\uff0c\u4e26\u53d6\u5230\u79d2\u3002<\/p>\n
\u5c0f\u7d50<\/h2>\n
\u4eca\u5929\u8ddf\u5927\u5bb6\u5206\u4eabsvelte store\u7cfb\u5217\u6587\u7ae0\u7b2c\u4e09\u7bc7 derived store \u5e0c\u671b\u5927\u5bb6\u6703\u559c\u6b61\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
derived store derived store \u662f\u751a\u9ebc\uff0c\u5728\u8aaa\u660e\u5b8cwritable store\u8ddfread … <\/p>\n
\u95b1\u8b80\u5168\u6587\u3008\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY20- \u884d\u751f\u7684store\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[160,79],"class_list":["post-1368","post","type-post","status-publish","format-standard","hentry","category-develop","tag-2019ironman","tag-svelte"],"_links":{"self":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/comments?post=1368"}],"version-history":[{"count":7,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1368\/revisions"}],"predecessor-version":[{"id":3003,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1368\/revisions\/3003"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}