{"id":20839098,"url":"https://github.com/sbdavid/wxappstore","last_synced_at":"2025-10-25T17:42:15.479Z","repository":{"id":123947308,"uuid":"130436636","full_name":"SBDavid/wxappStore","owner":"SBDavid","description":"微信小程序全局状态管理，并提供Vuex的开发体验","archived":false,"fork":false,"pushed_at":"2018-04-22T04:19:54.000Z","size":7,"stargazers_count":78,"open_issues_count":4,"forks_count":20,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T08:36:34.439Z","etag":null,"topics":["global-store","vuex","weapp"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/SBDavid.png","metadata":{"files":{"readme":"readme.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}},"created_at":"2018-04-21T03:32:21.000Z","updated_at":"2025-01-22T08:13:17.000Z","dependencies_parsed_at":"2024-01-13T19:22:03.828Z","dependency_job_id":"51893bcf-c9a6-48af-bd02-e173cd46d9ca","html_url":"https://github.com/SBDavid/wxappStore","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/SBDavid%2FwxappStore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SBDavid%2FwxappStore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SBDavid%2FwxappStore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SBDavid%2FwxappStore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SBDavid","download_url":"https://codeload.github.com/SBDavid/wxappStore/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253153163,"owners_count":21862318,"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":["global-store","vuex","weapp"],"created_at":"2024-11-18T01:12:20.372Z","updated_at":"2025-10-25T17:42:15.381Z","avatar_url":"https://github.com/SBDavid.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 微信小程序全局状态管理，并提供Vuex的开发体验\n\n## 1. 概要\n\n微信小程序的开发体验类似vue和react，但是却没有提供全局状态管理的机制，所以状态的共享只能通过属性传递的方式来实现。这种做法在小规模的应用中尚可以满足开发效率，但是在复杂的应用中组件的嵌套层次很深，属性传递的路径过长。\n\n于是我就想利用小程序Page中的data对象来构建一个全局store，这个store满足一下几点需求：\n\n- 1. store可以被当前页面中任意一个组件访问，并且这种访问时直接的而不是通过属性传递。\n- 2. 全局store对于组件是相应式的，也就是说store的变化可以使组件发生重绘。\n- 3. 页面和组件都可以修改store的状态，并且这种修改不破坏原来的响应式。\n- 4. 提供类似Vuex的开发体验，减小学习成本。\n\n## 2. 使用\n\n我们先跳过原理来看使用方法。\n\n### 2.1 安装\n\n将Store.js放入微信小程序项目的文件夹中，例如/lib/Store.js。\n\n### 2.2 创建Page对象\n\n这里我们通过```wxappStore.createPage```来创建。对比一下Store.js和原来的创建方法的区别\n\n```js\n// 原来的创建方法\nPage({\n  data: {\n    message: ''\n  },\n  onLoad: function () {\n    this.setData({\n        message: 'hello world'\n    })\n  }\n})\n```\n\n```js\n// 增加全局状态管理之后\nimport wxappStore from \"../../lib/Store.js\";\n\nPage(wxappStore.createPage({\n    // 第一个参数和原来传入Page方法的option没有区别。其中的data会作为全局共享对象来使用。\n    data: {\n        message: ''\n    },\n    onLoad: function () {\n        // 通过dispatch方法，进行一个异步操作。  \n        this.store.dispatch({ \n            name: 'testAction',\n            payload: 'hello world'\n        });\n        // 通过commit方法，修改全局状态。\n        this.store.commit({ \n            name: 'testMutation',\n            payload: 'hello world'\n        });\n    }\n}, \n// 第二个参数是一个对象，其中包含mutations和actions\n{\n    mutations: {\n        testMutation: function({ setData, payload, data }) {\n            setData({\n                message: payload\n            });\n        }\n    },\n    actions: {\n        testAction: function ({ commit, payload, data }) {\n            setTimeout(() =\u003e {\n                commit({\n                    name: 'testMutation',\n                    payload: payload\n                });\n            });\n        }\n    }\n}))\n```\n\n```wxappStore.createPage```方法有两个参数。\n\n第一个参数和原来传入Page方法的option没有区别。其中的data会作为全局共享对象来使用。\n\n第二个参数是一个对象，其中包含```mutations```和```actions```\n\n### 2.3 使用mutation\n\nmutation和Vuex中的mutation类似，它通过同步的方式修改状态。可以通过commit调用。\n\n#### 2.3.1 定义mutation\nmutations在```wxappStore.createPage```的第二个参数中定义，它用于修改全局状态。mutation通常同步的。mutation方法的参数是一个对象，包含三个属性：\n\n- **setData** ```function```： 用来修改全局状态，在微信小程序中直接修改状态不会触发页面重汇。\n- **payload** ```object```：修改的状态，可以是一个对象，也可以是String等基础数据类型\n- **data** ```object```：当前状态\n\n```js\nmutations: {\n    testMutation: function({ setData, payload, data }) {\n        setData({\n            message: payload\n        });\n    }\n},\n```\n\n#### 2.3.2 调用mutation\n通过commit方法调用mutation，它的参数是一个对象，包含两个属性：\n- **name** ```String```：mutation的名称\n- **payload** ```Object```：需要修改的状态，和Vuex的payload类似。\n\n```js\nthis.store.commit({ \n    name: 'testMutation',\n    payload: 'hello world'\n});\n```\n\n### 2.4 使用action\n\naction和Vuex中action概念类似，通常包含异步操作，在异步操作完成后进行commit操作。\n\n### 2.4.1 定义action\n\naction方法的参数是一个参数，包含3个属性：\n- **commit** ```function```：执行commit操作\n- **payload** ```Object```：数据对象，和Vuex类型\n- **data** ```Object```：当前状态\n\n```js\nactions: {\n    testAction: function ({ commit, payload, data }) {\n        setTimeout(() =\u003e {\n            commit({\n                name: 'testMutation',\n                payload: payload\n            });\n        });\n    }\n}\n```\n\n### 2.4.2 调用action\n通过dispatch方法调用action，它的参数是一个对象，包含两个属性：\n- **name** ```String```：action的名称\n- **payload** ```Object```：需要修改的状态，和Vuex的payload类似。\n\n```js\nthis.store.dispatch({ \n    name: 'testAction',\n    payload: 'hello world'\n});\n```\n\n### 2.5 创建Component\n\n在Component中我们需要完成两项工作\n\n第一将全局状态绑定到当前组件的data属性上，并将组件的data属性绑定到页面元素上。\n\n第二组件需要使用commit或者dispatch完成全局状态的修改。\n\n这里Store.j通过```wxappStore.createComp```来创建Component，它会通过代理的方式为Component实现全局状态管理的功能。\n\n```js\nimport wxappStore from \"../lib/Store.js\";\n\nComponent(wxappStore.createComp({\n  data: {\n    localtimeData: ''\n  },\n  ready: function () {\n    // 绑定全局状态\n    this.getGlobalData({ globalDataKey: 'localtime', localDataKey: 'localtimeData' });\n\n    // 改变全局状态  \n    this.store.commit({\n        name: 'testMutation',\n        payload: (new Date()).toLocaleTimeString()\n    })\n  }\n}))\n\n```\n\n```html\n\u003cview\u003e读取全局状态：{{localtimeData}}\u003c/view\u003e\n```\n\n### 2.5.1 全局状态绑定\n\n全局状态绑定通过```getGlobalData```这个实例方法实现，这个方法并不在小程序的运行环境中，它是Store.js执行的过程中插入到Component实例中的。\n\n\u003e ```getGlobalData``` 不能再```created```回调中调用，应为component的实例方法```setData```不能再```created```中调用。\n\n```getGlobalData```的参数是一个对象，包含两个属性：\n\n- **globalDataKey** ```String```：这个属性表示需要全局状态的属性名，这个全局状态将于component的本地状态绑定。\n- **localDataKey** ```String```：这个属性表示本地状态的属性名，这个本地状态将于全局状态绑定。\n\n```js\n// 绑定全局状态\nthis.getGlobalData({ globalDataKey: 'localtime', localDataKey: 'localtimeData' });\n```\n\n### 2.5.2 改变全局状态\n可以使用```store.commit```或者```store.dispatch```，```store```并不是小程序的运行环境中内置的，同样是通过Store.js插入到每一个component实例中。它的使用方法和Page中的类似。\n\n## 3. 这套框架的不足\n\n- Store.js借用了Page对象的data属性来完成全局状态管理，所以data属性的职责并不单一。data属性兼具了页面ViewModel的功能和全局状态的功能。但是Page中的data属性本来也具有全局意义，所以两者的冲突并不大。\n\n- component中的data属性职责并不单一。它兼具了本地属性的功能和绑定全局状态的功能。而且直接通过setData修改component中的data并不能触发全局状态的改变，因为data的作用域仅限于当前component，必须通过```store.commit```或者```store.dispatch```触发发全局状态的改变。\n\n- 如果你发现其他问题，欢迎留言，我们共同进步！","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbdavid%2Fwxappstore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsbdavid%2Fwxappstore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbdavid%2Fwxappstore/lists"}