{"id":407,"date":"2022-08-25T20:49:56","date_gmt":"2022-08-25T12:49:56","guid":{"rendered":"https:\/\/blog.osvlabs.com\/?p=407"},"modified":"2022-08-31T14:22:12","modified_gmt":"2022-08-31T06:22:12","slug":"flutter-mobx-%e4%bd%bf%e7%94%a8","status":"publish","type":"post","link":"https:\/\/blog.osvlabs.com\/?p=407","title":{"rendered":"Flutter MobX  \u4f7f\u7528"},"content":{"rendered":"<blockquote>\n<p>MobX \u662f\u4e00\u4e2a\u57fa\u4e8e\u89c2\u5bdf\u53ca\u54cd\u5e94\u7684\u72b6\u6001\u7ba1\u7406\u5e38\u7528\u5e93\uff0c\u7c7b\u4f3c Vuex \u548c React \u7684 MobX. \u7531\u4e8e\u5728 flutter \u5f00\u53d1\u4e2d\u503c\u53d8\u5316\u9875\u9762\u5e76\u4e0d\u4f1a\u4e3b\u52a8\u5237\u65b0\u6570\u636e\u53d8\u5316\uff0c\u5728\u4e0d\u540c\u9875\u9762\u95f4\u4f7f\u7528\u76f8\u540c\u6570\u636e\uff0c\u4fee\u6539\u6570\u636e\u65f6\u624b\u52a8\u5237\u65b0\u9875\u9762\u6bd4\u8f83\u9ebb\u70e6\uff0c\u5728\u5bf9\u6bd4\u4e86\u51e0\u6b3e\u72b6\u6001\u7ba1\u7406\u5e93\u4e4b\u540e\u9009\u62e9\u4e86\u6bd4\u8f83\u7b80\u5355\u6613\u7528\u7684 Mobx. \u4ee5\u4e0b\u662f\u4f7f\u7528\u6b65\u9aa4:<\/p>\n<\/blockquote>\n<ol>\n<li>\u5728 <code>pubspec.yaml<\/code> \u4e2d\u52a0\u5165:<\/li>\n<\/ol>\n<pre><code class=\"language-yaml\">  dependencies:\n    mobx: ^2.0.7+4\n    flutter_mobx: ^2.0.6+1\n  dev_dependencies:\n    build_runner: ^2.2.0\n    mobx_codegen: ^2.0.7<\/code><\/pre>\n<ol start=\"2\">\n<li>\n<p><code>flutter pub get<\/code><\/p>\n<\/li>\n<li>\n<p>\u521b\u5efa\u4e00\u4e2a store \u6587\u4ef6<\/p>\n<\/li>\n<\/ol>\n<pre><code class=\"language-dart\">import &#039;package:mobx\/mobx.dart&#039;;\n\/\/ Include generated file\n\/\/ \u5fc5\u987b\u6709\uff0c\u4e3a\u4e86\u751f\u6210 .g \u6587\u4ef6\npart &#039;counter.g.dart&#039;;\n\n\/\/ This is the class used by rest of your codebase\n\/\/ .g \u6587\u4ef6\u4f1a\u751f\u6210 _$Counter\nclass Counter = _Counter with _$Counter;\n\nfinal Counter count = Counter();\n\/\/ The store-class\nabstract class _Counter with Store {\n  @observable\n  int value = 0;\n\n  @action\n  void increment() {\n    value++;\n  }\n}<\/code><\/pre>\n<blockquote>\n<p>\u8981\u6ce8\u610f\u6587\u4ef6\u540d\uff0c\u6709\u53ef\u80fd\u4f1a\u751f\u6210\u4e0d\u4e86 .g \u6587\u4ef6, \u6709\u9519\u8bef\u4e5f\u4e0d\u4f1a\u751f\u6210<\/p>\n<\/blockquote>\n<ol start=\"4\">\n<li>\u6267\u884c <code>flutter pub run build_runner build<\/code>\uff0c \u4f1a\u751f\u6210 .g \u6587\u4ef6<\/li>\n<li>\u4f7f\u7528\u7684\u65f6\u5019\u76f4\u63a5 <code>count.<\/code><\/li>\n<li>\u7ec4\u4ef6\u91cc\u4f7f\u7528\n<pre><code>   Observer(\n          builder: (_) => Text(\n                '${counter.value}',\n                style: Theme.of(context).textTheme.headline4,\n              ),\n        ),<\/code><\/pre>\n<p>\u8fd9\u6837\u5c31\u4f1a\u81ea\u52a8\u5237\u65b0\u6570\u636e\u4e86<\/p>\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>MobX \u662f\u4e00\u4e2a\u57fa\u4e8e\u89c2\u5bdf\u53ca\u54cd\u5e94\u7684\u72b6\u6001\u7ba1\u7406\u5e38\u7528\u5e93\uff0c\u7c7b\u4f3c Vuex \u548c React \u7684 MobX. \u7531\u4e8e\u5728 flutter \u5f00\u53d1\u4e2d\u503c\u53d8\u5316\u9875\u9762\u5e76\u4e0d\u4f1a\u4e3b\u52a8\u5237\u65b0\u6570\u636e\u53d8\u5316\uff0c\u5728\u4e0d\u540c\u9875\u9762\u95f4\u4f7f\u7528\u76f8\u540c\u6570\u636e\uff0c\u4fee\u6539\u6570\u636e\u65f6\u624b\u52a8\u2026<\/p>\n","protected":false},"author":4,"featured_media":250,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":5}},"_links":{"self":[{"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/posts\/407"}],"collection":[{"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=407"}],"version-history":[{"count":3,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/posts\/407\/revisions"}],"predecessor-version":[{"id":414,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/posts\/407\/revisions\/414"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=\/wp\/v2\/media\/250"}],"wp:attachment":[{"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.osvlabs.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}