{"id":1354,"date":"2019-09-20T00:20:48","date_gmt":"2019-09-19T16:20:48","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1354"},"modified":"2022-02-17T15:10:39","modified_gmt":"2022-02-17T07:10:39","slug":"2020ironman-svelte-readable-store","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/09\/20\/2020ironman-svelte-readable-store\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY18- \u552f\u8b80\u7684store"},"content":{"rendered":"

readable store \u521d\u9ad4\u9a57<\/h1>\n

readable store \u662f\u751a\u9ebc\u5462?\u4eca\u5929\u9019\u7bc7\u5c31\u4f86\u5206\u4eab\u4e00\u4e0b\u751a\u9ebc\u662fsvelte\u7684readable store\uff0c\u4e26\u4e14\u900f\u904e\u9019\u4e00\u7bc7\u4f86\u66ffsvelte\u7684store\u5c55\u958b\u5e8f\u5e55\u3002<\/p>\n

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

\u76f8\u4fe1\u8b80\u8005\u5c0d\u65bcsvelte\u7684store\u61c9\u8a72\u5f88\u964c\u751f\uff0c\u4f46\u662f\u63d0\u5230redux\u6216\u662fngrx\u9084\u662fngxs\u61c9\u8a72\u5927\u5bb6\u90fd\u5f88\u719f\u6089\uff0c\u6240\u4ee5\u7c21\u55ae\u8b1bsvelte\u7684store\u5c31\u662freact\u7684redux\u6216\u662fangular\u7684ngrx\u6216\u662fngxs\u3002\u4e5f\u5c31\u662f\u5c07\u7cfb\u7d71\u5167\u7684\u8cc7\u6599\u96c6\u4e2d\u7ba1\u7406\u7684\u4e00\u500b\u5de5\u5177\uff0c\u4eca\u5929\u6703\u5148\u8ddf\u5927\u5bb6\u5206\u4eabreadable\u7684store\uff0c\u6240\u4ee5\u63a5\u4e0b\u4f86\u958b\u59cb\u4ecb\u7d39\u3002<\/p>\n

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

\u65e2\u7136store\u662f\u96c6\u4e2d\u7ba1\u7406\u8cc7\u6599\u7684\u4e00\u500b\u5de5\u5177\uff0creadable store\u5c31\u662f\u96c6\u4e2d\u7ba1\u7406\u7684\u8cc7\u6599\uff0c\u800c\u4e14\u90a3\u500b\u8cc7\u6599\u662f\u4e0d\u80fd\u88ab\u5176\u4ed6\u5730\u65b9\u4fee\u6539\u7684\u3002\u81f3\u65bc\u600e\u9ebc\u4f7f\u7528readable store\u4e0b\u9762\u6709\u500b\u4f8b\u5b50\u3002<\/p>\n

readable store \u7684\u7528\u6cd5<\/h2>\n

\u76f8\u4fe1\u5927\u5bb6\u90fd\u6703\u60f3\u8981\u505a\u4e00\u500b\u5012\u6578\u8a08\u6642\u5668\uff0c\u6216\u8005\u662f\u5c0f\u6642\u9418\u7684\u529f\u80fd\uff0c\u6240\u4ee5\u9019\u6642\u5019\u5c31\u6703\u9700\u8981\u4e00\u500b\u4e0d\u6bb5\u66f4\u65b0\u6642\u9593\u7684\u8a08\u6642\u5668\uff0c\u9019\u500b\u901a\u5e38\u5927\u5bb6\u90fd\u6703\u60f3\u5230Date\uff0c\u4e0d\u904eDate\u662f\u5a36\u5f97\u7576\u4e0b\u7684\u6642\u9593\uff0c\u6240\u4ee5\u9019\u908a\u9700\u8981\u505a\u4e00\u500b\u552f\u8b80\u4e26\u4e14\u6bcf\u79d2\u66f4\u65b0\u7684Date\uff0c\u9019\u6642\u5c31\u9700\u8981\u7528\u5230 readable store\u4e86\u3002<\/p>\n

readable store \u600e\u9ebc\u5beb<\/h2>\n

\u6240\u4ee5\u6211\u5011\u5148\u8981\u505a\u4e00\u500b readable store \u88e1\u9762\u653e\u4e00\u500b\u6bcf\u79d2\u66f4\u65b0\u4e00\u6b21\u7684Date\u9019\u500b\u6211\u5011\u5b9a\u7fa9\u5728store.js\u5982\u4e0b\u6240\u793a\u3002<\/p>\n

import { 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
\u9019\u908a\u6703\u7528\u5230svelte\/store<\/code>\u7684readable<\/code>\u7684\u65b9\u6cd5\uff0c\u5176\u4e2d\u7b2c\u4e00\u500b\u53c3\u6578\u662freadable store\u7684\u521d\u59cb\u503c\uff0c\u7b2c\u4e8c\u500b\u53c3\u6578\u662f\u4e00\u500b\u9700\u8981set\u4e26\u56de\u50b3stop\u7684\u65b9\u6cd5\uff0c\u9019\u662f\u7576\u9019\u500breadable\u7684\u65b9\u6cd5\u88ab\u8a3b\u518a\u6642\u6703\u547c\u53eb\u5230\uff0c\u800c\u5176\u56de\u50b3\u7684stop\u65b9\u6cd5\u6703\u5728\u53d6\u6d88\u8a3b\u518a\u6642\u6703\u88ab\u547c\u53eb\u3002<\/p>\n
\u5982\u4f55\u4f7f\u7528\u8a2d\u5b9a\u597d\u7684 readable store<\/h2>\n
\u5728\u524d\u9762\u6211\u5011\u5ba3\u544a\u4e86\u4e00\u500b\u6703\u6bcf\u79d2\u66f4\u65b0\u7684readable store\uff0c\u63a5\u4e0b\u4f86\u6211\u5011\u8981\u4f86\u4f7f\u7528\u4ed6\uff0c\u6211\u5011\u5beb\u5728App.svelte\u4f8b\u5b50\u5982\u4e0b\u3002<\/p>\n
<script>\n    import { time } 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><\/code><\/pre>\n
\u4f7f\u7528\u65b9\u6cd5\u5f88\u7c21\u55ae\uff0c\u9996\u5148\u5148\u628a\u5beb\u597d\u7684time\u7d66import\u9032\u4f86\uff0c\u63a5\u4e0b\u4f86\u5c31\u662f\u524d\u9762\u63d0\u5230\u7684$\u7b26\u865f\u7b2c\u4e8c\u500b\u7528\u6cd5\uff0c $time<\/code>\u9019\u6a23\u5c31\u53ef\u4ee5\u547c\u53ebstore\u7269\u4ef6\uff0c\u9019\u908a\u662freadable store\u5f85\u660e\u5929\u518d\u8ddf\u5176\u4ed6\u7684store\u505a\u6bd4\u8f03\u3002<\/p>\n
\u5c0f\u7d50<\/h2>\n
\u4eca\u5929\u8ddf\u5927\u5bb6\u5206\u4eab\u4e00\u4e0b svelte \u7684 readable store \u600e\u9ebc\u5beb\uff0c\u63a5\u4e0b\u4f86\u7684\u5e7e\u5929\u6703\u8ddf\u5927\u5bb6\u5206\u4eab\u4e00\u4e0b store \u9019\u6771\u897f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
readable store \u521d\u9ad4\u9a57 readable store \u662f\u751a\u9ebc\u5462?\u4eca\u5929\u9019\u7bc7\u5c31\u4f86\u5206\u4eab\u4e00\u4e0b\u751a\u9ebc\u662fsve … <\/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 DAY18- \u552f\u8b80\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-1354","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\/1354","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=1354"}],"version-history":[{"count":8,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1354\/revisions"}],"predecessor-version":[{"id":3005,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1354\/revisions\/3005"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}