DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: store.onChange and store.offChange supported

This commit is contained in:
dntzhang 2019-10-04 16:20:22 +08:00
parent 14c180705e
commit dcf15f36c1
5 changed files with 126 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/omix-ts/miniprogram/utils/create.js
View File

File diff suppressed because one or more lines are too long

52
packages/omix-ts/miniprogram/utils/create.ts
View File

@ -10,6 +10,7 @@ import { getPath, needUpdate, fixPath, getUsing } from './path'
const ARRAYTYPE = '[object Array]'
const OBJECTTYPE = '[object Object]'
const FUNCTIONTYPE = '[object Function]'
const changes = []
function create(store, option) {
@ -18,6 +19,22 @@ function create(store, option) {
store.instances = {}
}
if(!store.onChange){
store.onChange = function(fn){
changes.push(fn)
}
}
if(!store.offChange){
store.offChange = function(fn){
for(let i = 0,len =changes.length;i<len;i++){
if(changes[i] === fn){
changes.splice(i, 1)
break
}
}
}
}
getApp().globalData && (getApp().globalData.store = store)
option.data = store.data
@ -94,25 +111,26 @@ function _update(kv, store) {
}
})
}
store.onChange && store.onChange(kv)
store.debug && storeChangeLogger(store)
changes.forEach(change => {
change(kv)
})
store.debug && storeChangeLogger(store, kv)
}
function storeChangeLogger (store) {
store.onChange = (diffResult) => {
try {
const preState = wx.getStorageSync(`CurrentState`) || {}
const title = `State Changed`
console.groupCollapsed(`%c ${ title } %c ${ Object.keys(diffResult) }`, 'color:#e0c184; font-weight: bold', 'color:#f0a139; font-weight: bold')
console.log(`%c Pre State`, 'color:#ff65af; font-weight: bold', preState)
console.log(`%c Change State`, 'color:#3d91cf; font-weight: bold', diffResult)
console.log(`%c Next State`, 'color:#2c9f67; font-weight: bold', store.data)
console.groupEnd()
wx.setStorageSync(`CurrentState`, store.data)
} catch (e) {
console.log(e)
}
}
function storeChangeLogger (store, diffResult) {
try {
const preState = wx.getStorageSync(`CurrentState`) || {}
const title = `State Changed`
console.groupCollapsed(`%c ${ title } %c ${ Object.keys(diffResult) }`, 'color:#e0c184; font-weight: bold', 'color:#f0a139; font-weight: bold')
console.log(`%c Pre State`, 'color:#ff65af; font-weight: bold', preState)
console.log(`%c Change State`, 'color:#3d91cf; font-weight: bold', diffResult)
console.log(`%c Next State`, 'color:#2c9f67; font-weight: bold', store.data)
console.groupEnd()
wx.setStorageSync(`CurrentState`, store.data)
} catch (e) {
console.log(e)
}
}
function updateStoreByFnProp(ele, data) {

14
packages/omix/README.md
View File

@ -121,7 +121,7 @@ this.oData.arr.push(111) //会触发视图更新
this.oData.arr.purePush(111) //不会触发视图更新
```
####  函数属性
###  函数属性
```js
use: [
@ -140,6 +140,18 @@ this.oData.arr.purePush(111) //不会触发视图更新
函数属性定义在页面或者组件的 use 里，如上面的 `reverseMotto`， 它可以直接绑定在 wxml 里，motto 更新会自动更新 reverseMotto 的值。
### store 变化监听
```js
const handler = function (evt) {
console.log(evt)
}
//监听，允许绑定多个
store.onChange(handler)
//移除监听
store.offChange(handler)
```
## Q & A
* 比如我一个弹窗组件，可能在很多页面使用，也可能在同一个页面使用多次；如果使用store来作为组件间通信的话，怎么应用可以实现组件是纯组件而不跟业务相关呢?

8
packages/omix/pages/index/index.js
View File

@ -54,6 +54,14 @@ create(store, {
setTimeout(() => {
this.store.data.motto = 'abcdefg'
}, 2000)
const handler = function (evt) {
console.log(evt)
}
store.onChange(handler)
store.offChange(handler)
},
getUserInfo: function (e) {
this.store.data.userInfo = e.detail.userInfo

53
packages/omix/utils/create.js
View File

@ -10,7 +10,7 @@ import { getPath, needUpdate, fixPath, getUsing } from './path'
const ARRAYTYPE = '[object Array]'
const OBJECTTYPE = '[object Object]'
const FUNCTIONTYPE = '[object Function]'
const changes = []
function create(store, option) {
if (arguments.length === 2) {
@ -18,6 +18,22 @@ function create(store, option) {
store.instances = {}
}
if(!store.onChange){
store.onChange = function(fn){
changes.push(fn)
}
}
if(!store.offChange){
store.offChange = function(fn){
for(let i = 0,len =changes.length;i<len;i++){
if(changes[i] === fn){
changes.splice(i, 1)
break
}
}
}
}
getApp().globalData && (getApp().globalData.store = store)
option.data = store.data
@ -94,25 +110,26 @@ function _update(kv, store) {
}
})
}
store.onChange && store.onChange(kv)
store.debug && storeChangeLogger(store)
changes.forEach(change => {
change(kv)
})
store.debug && storeChangeLogger(store, kv)
}
function storeChangeLogger (store) {
store.onChange = (diffResult) => {
try {
const preState = wx.getStorageSync(`CurrentState`) || {}
const title = `State Changed`
console.groupCollapsed(`%c ${ title } %c ${ Object.keys(diffResult) }`, 'color:#e0c184; font-weight: bold', 'color:#f0a139; font-weight: bold')
console.log(`%c Pre State`, 'color:#ff65af; font-weight: bold', preState)
console.log(`%c Change State`, 'color:#3d91cf; font-weight: bold', diffResult)
console.log(`%c Next State`, 'color:#2c9f67; font-weight: bold', store.data)
console.groupEnd()
wx.setStorageSync(`CurrentState`, store.data)
} catch (e) {
console.log(e)
}
}
function storeChangeLogger (store, diffResult) {
try {
const preState = wx.getStorageSync(`CurrentState`) || {}
const title = `State Changed`
console.groupCollapsed(`%c ${ title } %c ${ Object.keys(diffResult) }`, 'color:#e0c184; font-weight: bold', 'color:#f0a139; font-weight: bold')
console.log(`%c Pre State`, 'color:#ff65af; font-weight: bold', preState)
console.log(`%c Change State`, 'color:#3d91cf; font-weight: bold', diffResult)
console.log(`%c Next State`, 'color:#2c9f67; font-weight: bold', store.data)
console.groupEnd()
wx.setStorageSync(`CurrentState`, store.data)
} catch (e) {
console.log(e)
}
}
function updateStoreByFnProp(ele, data) {