{"id":18905070,"url":"https://github.com/kenberkeley/vue-state-management-alternative","last_synced_at":"2025-04-15T04:12:30.737Z","repository":{"id":143891858,"uuid":"86438174","full_name":"kenberkeley/vue-state-management-alternative","owner":"kenberkeley","description":"Vuex state management alternative for both Vue 1.x \u0026 2.x","archived":false,"fork":false,"pushed_at":"2017-05-25T10:01:13.000Z","size":29,"stargazers_count":69,"open_issues_count":0,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-15T04:12:25.016Z","etag":null,"topics":["alternative","state-management","vue","vuex"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenberkeley.png","metadata":{"files":{"readme":"README-CN.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2017-03-28T09:02:52.000Z","updated_at":"2024-06-22T03:45:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"f5a18f60-ae83-4605-86dd-36e5736e9473","html_url":"https://github.com/kenberkeley/vue-state-management-alternative","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/kenberkeley%2Fvue-state-management-alternative","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fvue-state-management-alternative/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fvue-state-management-alternative/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenberkeley%2Fvue-state-management-alternative/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenberkeley","download_url":"https://codeload.github.com/kenberkeley/vue-state-management-alternative/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249003955,"owners_count":21196793,"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":["alternative","state-management","vue","vuex"],"created_at":"2024-11-08T09:10:34.998Z","updated_at":"2025-04-15T04:12:30.731Z","avatar_url":"https://github.com/kenberkeley.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 另类状态管理\r\n\r\n我们都知道 Vue 2.x 移除了 `.sync`（`v2.3` 又回来了一个[阉割版](https://vuejs.org/v2/guide/components.html#sync-Modifier)的）  \r\n尤其是对于 `props` 传递深度较浅的情况下，会多写一些冗余繁琐的代码  \r\n文档提到用 `v-model` 在组件上实现[双向绑定](http://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events)，也实在是太鸡肋了  \r\n官方推荐使用 Vuex，但对于**独立封装**的组件，一般是不应该引入的  \r\n业界虽然推崇 `单向数据流` 最佳实践，但也要权衡开发效率、易维护性与直观性\r\n\r\n在参阅了文档中的\r\n\r\n* [`data` 必须是函数](http://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function)\r\n* [状态管理](http://vuejs.org/v2/guide/state-management.html)\r\n\r\n我们可以另辟蹊径，自行实现出简易另类的状态管理  \r\n\r\n先来看看 `src/sharedState.mixin.js`：\r\n\r\n```js\r\n// The magic of state persistance is closure here\r\nexport const sharedState = {\r\n  todos: [],\r\n  counter: 0\r\n}\r\n\r\nexport const resetTodos = () =\u003e sharedState.todos = []\r\nexport const resetCounter = () =\u003e sharedState.counter = 0\r\nexport const addTodo = (s) =\u003e sharedState.todos.push(s)\r\nexport const inc = () =\u003e sharedState.counter++\r\nexport const dec = () =\u003e sharedState.counter--\r\n\r\n/**\r\n * @exports.default {Mixin}\r\n */\r\nexport default {\r\n  data: () =\u003e ({\r\n    sharedState\r\n  }),\r\n  methods: {\r\n    resetTodos,\r\n    resetCounter,\r\n    addTodo,\r\n    inc,\r\n    dec\r\n  }\r\n}\r\n\r\n/*\r\n\r\n  You can access the shared state and methods\r\n  not only within Vue component (as mixins) but also in common js files\r\n\r\n  ※ e.g.\r\n  import { sharedState, inc } from '\u003cpath to\u003e/sharedState.mixin'\r\n  \r\n  console.info(sharedState.counter) // 0\r\n  inc()\r\n  console.info(sharedState.counter) // 1\r\n \r\n */\r\n```\r\n\r\n应用到如下组件树中：\r\n\r\n```\r\nApp\r\n ├─ Child1\r\n |    └─ Grandchild1\r\n └─ Child2\r\n      └─ Grandchild2\r\n```\r\n\r\n最终结果见[在线 demo](https://kenberkeley.github.io/vue-state-management-alternative/dist/)  \r\n\r\n\u003e 建议进入 [`src/`](./src) 了解如何使用  \r\n\u003e 本方式适用于 Vue 1.x / 2.x\r\n\r\n***\r\n\r\n### 本地测试\r\n\r\n```\r\n$ git clone https://github.com/kenberkeley/vue-state-management-alternative.git\r\n$ cd vue-state-management-alternative\r\n$ npm i\r\n$ npm start\r\n```\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenberkeley%2Fvue-state-management-alternative","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenberkeley%2Fvue-state-management-alternative","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenberkeley%2Fvue-state-management-alternative/lists"}