微信小程序foreach遍历_手把手系列，100行代码搞定微信小程序全局状态同步

最近接了一个小程序项目，对于以前只写过一个小工具的我而言，是时候考察一波小程序的基本功了(认真脸)。

上手先了解了各路大神撸小程序的方式，前有基于vue语法的mpvue ，专职生成小程序；又有基于react的京东团队的taro 在后，一语多端，支持react语法生成小程序、H5、react-native......；还有官方wepy，仿vue语法，官方支持更稳定......都芥末:ox:的吗？ 赶紧每个都学习了一下。

然鹅——

！！翻开issue页，似乎都有几十到上百条的open isuue未解决，同时还有一些诡异的bug夹杂其中，好怕怕。遂放弃......逃

于是手撸原生框架，于是遇到了原生框架中一个最大的问题，全局状态同步管理 /(ㄒoㄒ)/~~。

小程序框架提供了许多开箱即用的组件，大大提高我们的开发效率。但是作为一个不能直接引用js npm包的语法 (支持的模式很繁琐) ，同时小程序本身也没有提供类似redux、vuex的全局的状态管理工具，这简直违反了mvc(mvvm)党的一贯作风。

于是想到了手写一个简单的全局状态管理库，从各方面考察似乎可行，毕竟是一个接近vue的框架。

心路历程如上。。。。。。还是不废话了，上主菜 (可直接翻到文末查看代码完整版) 。

小程序官方提供且推荐的demo中是把全局数据放在app实例上——示例 ，咋一看似乎很接近我们的全局状态管理需求，但这只是一个数据存储方式，完全没法做到响应式状态。

想想我们常见的需求，在个人中心页点击“去登录”，跳转到登录页，测试一番骚操作，好不容易登录成功了，返回个人中心，依旧是一个大大的“去登陆”按钮在嘲讽着他/她，于是测试打了你一顿并让你回去加班。

这时候你完全可以在onShow中使用 this.setData 刷新每一次页面展开......前提是你不怕繁琐，同时愿意消耗更多的性能(sex power)。

所以开始手写，第一步，在项目中生成一个 /store/sotre.js 文件。

再放两个轮子中常用的方法

const _toString = Object.prototype.toString

function isFunction(obj) {

return typeof obj === 'function' || false

}

function isObject(obj) {

return _toString.call(obj) === '[object Object]' || false

}

复制代码

createStore

全局状态管理理索当然需要一个全局的状态存储，同时考虑使用react-redux的connect模式做绑定：

let _state = null

function connect(mapStateToData, mapMethodTopPage) {

...

}

/**

* 创建store对象

*

* @param { Object } store

* @returns { Object } _Store

*/

function createStore(state) {

if (_state) {

console.warn(

'there are multiple store active. This might lead to unexpected results.'

)