yisbug / iostore Goto Github PK
View Code? Open in Web Editor NEW极简的全局数据管理方案,基于 React Hooks API
极简的全局数据管理方案,基于 React Hooks API
export const isObject = o => typeof o === 'object';
先感谢大神写的这个工具,使用中有些问题,还望解惑
createStore({
namespace: 'InventoryHkStore',
list: {},
async refreshList(){
this.list = await axios.get('/xx');
}
});
举例如果 list. next_page_url 为 null 的时候,会抛出异常:
TypeError: Cannot convert undefined or null to object
把 null 转为空字符串就不会提示了
报错代码位置
/***/ "./node_modules/iostore/src/util.js":
/*!******************************************!*\
!*** ./node_modules/iostore/src/util.js ***!
\******************************************/
/*! exports provided: isFunction, isUndefined, isObject, isArray, isPromise, addProxy */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isFunction", function() { return isFunction; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isUndefined", function() { return isUndefined; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isObject", function() { return isObject; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isArray", function() { return isArray; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isPromise", function() { return isPromise; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "addProxy", function() { return addProxy; });
const isFunction = fn => typeof fn === 'function';
const isUndefined = prop => typeof prop === 'undefined';
const isObject = o => typeof o === 'object';
const isArray = o => Array.isArray(o);
const isPromise = fn => {
if (fn instanceof Promise) return true;
return isObject(fn) && isFunction(fn.then);
};
const addProxy = (o, handler) => {
if (!isObject(o)) return o;
if (isArray(o)) {
o.forEach((item, index) => {
if (isObject(item)) {
o[index] = addProxy(item, handler);
}
});
} else if (isObject(o)) {
Object.keys(o).forEach(key => { // 这一行画了红线
if (isObject(o[key])) {
o[key] = addProxy(o[key], handler);
}
});
}
return new Proxy(o, handler);
};
哈哈,确实很简洁
因为根据store名称来收集setState,从而触发渲染的
store任何一个属性变化都将触发所有依赖组件渲染,产生不必要的渲染
这段代码具体是什么意思
比如一个语言切换场景
export default createStore({
namespace: 'IntlStore',
locale: 'en-gb',
m() { // computed 型变量目前实现
return messages[this.locale]
},
get m() { // 期望实现,
return messages[this.locale]
},
setLocale(l) {
this.locale = l
// this.m = messages[l] // 一种丑陋的方式达成期望实现,每次locale变化时显式声明
}
})
// usage in component
// ...
<p>m()['login']</p> // 目前实现
<p>m['login']</p> // 期望实现
看了下iostore的实现,很不错,楼主有没有兴趣也试试concent呢 https://github.com/concentjs/concent
代码看下,质量蛮高,反正我写不出来。。。那个 addProxy 是一次将对象的深层次,全部代理完。可以参考一下 vue3.0的代理办法,在 get 里面再做代理, 不get就不代理。。。
ERROR in ./node_modules/iostore/src/createStore.js
Module parse failed: Unexpected token (9:26)
You may need an appropriate loader to handle this file type.
|
| export default config => {
| const { namespace = '', ...rest } = config;
| let service;
| let isChanged = false;
@ ./node_modules/iostore/src/index.js 2:0-40
@ ./src/workerjs/Navigation.js
@ multi (webpack)-dev-server/client?http://192.168.0.17:8888 ./src/workerjs/Navigation.js
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.