咱们做个 自己用的工具,不是框架. 好多细节都没考虑到
慢慢优化
- 其实这里有个问题 就是再混入 小程序 页面的时候
- 每个页面是相对独立的 多页面应用
- 所以 每个data也是独立的
- 那么要修改页面上的值 需要setData
- 这时候 同步这个工作 就只能放到全局变量 和 onshow中去做了
- 暂时没有想出更好的办法,
上面的使用 已经贴到了上一篇了
// 当修改了 当前$store中的数据 页面上的数据 也会有更新
// 要将这个 数据 混入到Page的data中
// 需要通过commit修改state中的value
// 要定义 底层, 而不是使用层
/**
* 实现类似于vuex 的功能
* store 中定义 数据 => 页面中 可以使用 store中的数据 通过$store.state.xxx
* 当store中的数据 通过commit 改变 => 就会影响到页面上的 数据 一起改变
*/
import proxy from '../defineProperty';
class Store {
constructor(app) {
this.app = app;
}
init(page) {
this.page = page;
proxy.proxyInit(this.state);
Object.keys(this.state).forEach(key => {
if (key === 'watch') return;
this.state.watch(key, (value) => {
this.page.setData({
[`$store.state.${key}`]: value
})
})
})
}
state = {
platform: wx.getSystemInfoSync().platform,
name:1
}
_keyList = (() => {
return Object.keys(this.state)
})();
#mutation = {
// 修改了state中的值以后
setNum: (value) => {
this.state['num'] = value;
}
}
commit(methodKey, val) {
if (typeof this.#mutation[methodKey] !== 'function') {
console.warn('store.methodKey is not function');
return;
}
this.#mutation[methodKey](val);
}
}
export default Store;
/**
* 将State中的数据 混入到 this.data中
* @param {Object} minxParams
*/
function minx(minxParams) {
this.data = Object.assign({}, {
$store: {
state: minxParams['state']
}
}, this.data);
return this
}
export default minx
然后使用的时候
methods{
onClick(){ app.globalData.store.commit( methodsName,value ) }
}