{"id":25179544,"url":"https://github.com/21hook/vuex-mechanism","last_synced_at":"2025-07-31T19:04:30.765Z","repository":{"id":144074206,"uuid":"140151048","full_name":"21hook/vuex-mechanism","owner":"21hook","description":"vuex implementation mechanism","archived":false,"fork":false,"pushed_at":"2018-08-16T00:35:05.000Z","size":46,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T04:16:09.072Z","etag":null,"topics":["listener-pattern","vue-devtools","vuex"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/21hook.png","metadata":{"files":{"readme":"README-zh_cn.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-08T08:37:51.000Z","updated_at":"2019-05-27T01:18:09.000Z","dependencies_parsed_at":"2024-06-14T04:15:33.924Z","dependency_job_id":null,"html_url":"https://github.com/21hook/vuex-mechanism","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/21hook/vuex-mechanism","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-mechanism","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-mechanism/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-mechanism/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-mechanism/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/21hook","download_url":"https://codeload.github.com/21hook/vuex-mechanism/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-mechanism/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263914453,"owners_count":23529078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["listener-pattern","vue-devtools","vuex"],"created_at":"2025-02-09T15:36:58.456Z","updated_at":"2025-07-06T14:06:46.550Z","avatar_url":"https://github.com/21hook.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vuex\n\u003e vuex实现原理\n\n[README English](https://github.com/21hook/vuex-mechanism/blob/master/README.md)\n\n## 关键概念\n发布-订阅模式，递归数据类型\n\n## 原理\n定义store对象的fn订阅者，提供在commit store对象时要调用的回调函数。\n定义要分发/派遣的action列表，将action类型和[payload](https://en.wikipedia.org/wiki/Payload_(computing)) data提交给开发者工具\n当存储对象被提交的时候。\n创建一个ModuleCollection类，它是一个递归数据类型。实现一个Module类包括以下\n字段:actions、mutations和getters作为base case。实现ModuleCollection类，递归地添加每个模块\n对象作为它的子对象。\n将store对象的每个模块的getter方法添加为Vue组件的计算属性。当\n模块的state属性改变时，更新状态将自动地输出和渲染到组件树中。\n\n## 目录\n1. [Commit messages](#demo1-commit-messagessource)\n2. [Action dispatch](#demo2-action-dispatchsource)\n3. [ModuleCollection - recursive datatype](#demo3-modulecollection---recursive-datatypesource)\n4. [Getters](#demo4-getterssource)\n\n## Demo1: Commit messages([Source](https://github.com/21hook/vuex-mechanism/tree/master/demo1))\n定义store对象的fn订阅者。在commit store时，将触发fn处理回调。\n向开发者工具发送mutation消息和参数。然后,开发工具\n触发自己的处理程序，在Vuex控制台显示更新状态。\n\n## Demo2: Action dispatch([Source](https://github.com/21hook/vuex-mechanism/tree/master/demo2))\n定义要分发的action列表。下发一个动作，并且提交action类型\u0026\npayload data到开发者工具中。\n\n## Demo3: ModuleCollection - recursive datatype([Source](https://github.com/21hook/vuex-mechanism/tree/master/demo3))\n定义一个ModuleCollection类，存储一个以module对象作为base case的递归数据类型的引用。\nmodule collection对象的constructor case使用module对象作为其子节点。\n然后，从store对象的module参数定义的module tree中安装模块actions、mutations和getters。\n\n## Demo4: Getters([Source](https://github.com/21hook/vuex-mechanism/tree/master/demo4))\n将存储的每个模块的getter添加为Vue组件的计算属性。\n当修改模块的状态属性时，更新状态将自动地输出和渲染到组件树中。(单向数据绑定)\n\n## Vuex architecture\n1. \n添加store state作为Vue components视图的订阅者，\u0026下发actions去处理用户输入\n```             \n               add                       trigger  \n    State -------------\u003e Vue components - - - - -\u003e Users\n                       \n```\n\n2. \n下发actions, 发布mutations, \u0026渲染组件\n```         \n                    dispatch            commit              emit  \n    Vue components ----------\u003e Actions --------\u003e Mutations - - - -\u003e Development tool\n        |                                             |\n         \u003c------------------    State  \u003c--------------\n                render                     mutate              \n    \n```\n\n\n## License\nMIT\n\n## References\n1. Wikipedia [Observer pattern](https://en.wikipedia.org/wiki/Observer_pattern)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F21hook%2Fvuex-mechanism","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F21hook%2Fvuex-mechanism","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F21hook%2Fvuex-mechanism/lists"}