{"id":25179549,"url":"https://github.com/21hook/vuex-demos","last_synced_at":"2025-04-04T04:16:12.769Z","repository":{"id":144074199,"uuid":"138001868","full_name":"21hook/vuex-demos","owner":"21hook","description":"Vuex state management pattern for Vue web application","archived":false,"fork":false,"pushed_at":"2018-06-23T03:46:55.000Z","size":1255,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-09T15:38:41.885Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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.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-06-20T08:20:28.000Z","updated_at":"2018-06-23T03:46:57.000Z","dependencies_parsed_at":"2024-06-19T04:49:35.815Z","dependency_job_id":null,"html_url":"https://github.com/21hook/vuex-demos","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-demos","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-demos/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-demos/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/21hook%2Fvuex-demos/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/21hook","download_url":"https://codeload.github.com/21hook/vuex-demos/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247117762,"owners_count":20886439,"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":[],"created_at":"2025-02-09T15:36:59.439Z","updated_at":"2025-04-04T04:16:12.762Z","avatar_url":"https://github.com/21hook.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vuex Demos\nVuex state management pattern for Vue web application\n\n## Project Structure\nThe general project structure for each Vuex demos\n\n```\n├── index.html\n├── main.js\n├── api\n│   └── ... # abstractions for making API requests\n├── components\n│   ├── App.vue\n│   └── ...\n└── store\n    ├── index.js          # where we assemble modules and export the store\n    ├── actions.js        # root actions\n    ├── mutations.js      # root mutations\n    └── modules\n        ├── cart.js       # cart module\n        └── products.js   # products module\n```\n\n## Table of Contents\n1. [Counter](https://github.com/21hook/vuex-demos#counter) \n2. [Counter with commit histories](https://github.com/21hook/vuex-counter#counter-with-commit-histories)\n3. [Todo MVC](https://github.com/21hook/vuex-counter#todo-mvc)\n\n## Counter\nThe mutation mutated the state of the app, the associated component will be reactive \nto the state transition in the state, then output the necessary data \u0026 render the \ncomponent tree, automatically \n\nApplication architecture    \n   output the data in the component tree \u0026 render it   \n ↑--------------------------------------------------|\n |    mutate             commit                     ↓\n ▆ \u003c------------- ▆ \u003c------------- ▆                ▆ \nState          Mutations        Actions        Vue components\n\n## Counter with commit histories\nThe Vue components dispatch a set of actions, each of which can be committed into \nthe mutation; When the mutation mutated the state of the app, the associated component \nwill be reactive to the state transition in the state, then output the necessary data \u0026 \nrender it in the component tree, automatically.\n\nApplication architecture    \n   output/access the data in the component tree \u0026 render it   \n ↑--------------------------------------------------|\n |    mutate             commit          dispatch   ↓\n ▆ \u003c------------- ▆ \u003c------------- ▆ \u003c------------- ▆ \nState          Mutations        Actions           Vue components\n\n## Todo MVC\nThe Vue components dispatch actions, each of which can be committed into \nthe mutation; When the mutation mutated the state of the app, the associated component \nwill be reactive to the state transition in the state, then output the necessary data \u0026 \nrender it in the component tree, automatically.\n\nApplication architecture\n   output/access the data in the component tree \u0026 render it   \n ↑--------------------------------------------------|\n |    mutate             commit          dispatch   ↓\n ▆ \u003c------------- ▆ \u003c------------- ▆ \u003c------------- ▆ \nState          Mutations        Actions           Vue components\n\n## Shopping cart\nThe Vue components dispatch actions, each of which can be committed into the mutation;\nWhen the mutation mutated the state of the app, the associated component will be reactive \nto the state transition in the state, then output the payload \u0026 render it in the component\ntree.\n\nApplication architecture\n   output/access the data in the component tree \u0026 render it   \n ↑--------------------------------------------------|\n |    mutate             commit          dispatch   ↓\n ▆ \u003c------------- ▆ \u003c------------- ▆ \u003c------------- ▆ \nState          Mutations        Actions           Vue components\n\n## License\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F21hook%2Fvuex-demos","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F21hook%2Fvuex-demos","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F21hook%2Fvuex-demos/lists"}