微信小程序存在多个相同路径下的页面栈问题



  • 大家都知道微信小程序的navigatetTo是会去新建一个页面“实例”的,这个实例包括视图层和逻辑层,
    在这样一个常见的场景下——从一个商品页中的相关推荐里进入这个商品的商品页,这就存在了多个相同路径下的”实例“,
    OK,问题来了

    在引入redux、mobx等数据管理框架时,该怎么去处理同一份数据却管理着多个“实例”?

    具体表现可到代码片段中查看https://developers.weixin.qq.com/s/uYJudtmr7Pcn

    import Taro, { Component } from '@tarojs/taro'
    import { View, Button, Text } from '@tarojs/components'
    import { observer, inject } from '@tarojs/mobx'

    import './index.scss'

    @inject('counterStore')
    @observer
    class Index extends Component {

    config = {
    navigationBarTitleText: '首页'
    }
    shouldComponentUpdate() {
    return !this.hasHide
    }

    componentDidShow () {
    this.hasHide = false
    }

    componentDidHide () {
    this.hasHide = true
    }

    increment = () => {
    const { counterStore } = this.props
    counterStore.increment()
    }

    decrement = () => {
    const { counterStore } = this.props
    counterStore.decrement()
    }

    incrementAsync = () => {
    Taro.navigateTo({
    url: '/pages/index/index'
    })
    }

    render () {
    const { counterStore: { counter } } = this.props
    return (
    <View className='index'>
    <Button onClick={this.increment}>+</Button>
    <Button onClick={this.decrement}>-</Button>
    <Button onClick={this.incrementAsync}>跳到新页面</Button>
    <Text>{counter}</Text>
    </View>
    )
    }
    }

    export default Index


登录后回复