fix: connect do not update issue, close #202
parent
f597b7ece3
commit
213706c185
|
@ -9,7 +9,7 @@ export default function wrapWithConnect (WrappedComponent) {
|
||||||
const tempProps = WrappedComponent.props || {}
|
const tempProps = WrappedComponent.props || {}
|
||||||
const methods = WrappedComponent.methods || {}
|
const methods = WrappedComponent.methods || {}
|
||||||
const props = {}
|
const props = {}
|
||||||
Object.keys(tempProps).forEach(k => { props[k] = PropTypes.any })
|
Object.keys(tempProps).forEach(k => { props[k] = ({ ...k, required: false }) })
|
||||||
WrappedComponent.props.__propsSymbol__ = PropTypes.any
|
WrappedComponent.props.__propsSymbol__ = PropTypes.any
|
||||||
WrappedComponent.props.children = PropTypes.array.def([])
|
WrappedComponent.props.children = PropTypes.array.def([])
|
||||||
const ProxyWrappedComponent = {
|
const ProxyWrappedComponent = {
|
||||||
|
@ -22,19 +22,24 @@ export default function wrapWithConnect (WrappedComponent) {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
render () {
|
render () {
|
||||||
const { $listeners, $slots = {}, $attrs } = this
|
const { $listeners, $slots = {}, $attrs, $scopedSlots } = this
|
||||||
const props = getOptionProps(this)
|
const props = getOptionProps(this)
|
||||||
const wrapProps = {
|
const wrapProps = {
|
||||||
props: {
|
props: {
|
||||||
...props,
|
...props,
|
||||||
__propsSymbol__: Symbol(),
|
__propsSymbol__: Symbol(),
|
||||||
children: $slots.default || [],
|
children: $slots.default || props.children || [],
|
||||||
},
|
},
|
||||||
on: $listeners,
|
on: $listeners,
|
||||||
attrs: $attrs,
|
attrs: $attrs,
|
||||||
|
scopedSlots: $scopedSlots,
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<WrappedComponent {...wrapProps} ref='wrappedInstance'/>
|
<WrappedComponent {...wrapProps} ref='wrappedInstance'>
|
||||||
|
{Object.keys($slots).map(name => {
|
||||||
|
return <template slot={name}>{$slots[name]}</template>
|
||||||
|
})}
|
||||||
|
</WrappedComponent>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import shallowEqual from 'shallowequal'
|
||||||
import omit from 'omit.js'
|
import omit from 'omit.js'
|
||||||
import { getOptionProps } from '../props-util'
|
import { getOptionProps } from '../props-util'
|
||||||
import PropTypes from '../vue-types'
|
import PropTypes from '../vue-types'
|
||||||
|
import proxyComponent from '../proxyComponent'
|
||||||
|
|
||||||
function getDisplayName (WrappedComponent) {
|
function getDisplayName (WrappedComponent) {
|
||||||
return WrappedComponent.name || 'Component'
|
return WrappedComponent.name || 'Component'
|
||||||
|
@ -13,8 +14,10 @@ export default function connect (mapStateToProps) {
|
||||||
const finnalMapStateToProps = mapStateToProps || defaultMapStateToProps
|
const finnalMapStateToProps = mapStateToProps || defaultMapStateToProps
|
||||||
return function wrapWithConnect (WrappedComponent) {
|
return function wrapWithConnect (WrappedComponent) {
|
||||||
const tempProps = omit(WrappedComponent.props || {}, ['store'])
|
const tempProps = omit(WrappedComponent.props || {}, ['store'])
|
||||||
const props = {}
|
const props = {
|
||||||
Object.keys(tempProps).forEach(k => { props[k] = PropTypes.any })
|
__propsSymbol__: PropTypes.any,
|
||||||
|
}
|
||||||
|
Object.keys(tempProps).forEach(k => { props[k] = ({ ...k, required: false }) })
|
||||||
const Connect = {
|
const Connect = {
|
||||||
name: `Connect_${getDisplayName(WrappedComponent)}`,
|
name: `Connect_${getDisplayName(WrappedComponent)}`,
|
||||||
props,
|
props,
|
||||||
|
@ -28,7 +31,11 @@ export default function connect (mapStateToProps) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
__propsSymbol__ () {
|
||||||
|
if (mapStateToProps && mapStateToProps.length === 2) {
|
||||||
|
this.subscribed = finnalMapStateToProps(this.store.getState(), this.$props)
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
this.trySubscribe()
|
this.trySubscribe()
|
||||||
|
@ -88,6 +95,6 @@ export default function connect (mapStateToProps) {
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
return Connect
|
return proxyComponent(Connect)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue