UNIAPP renderjs vuex共享复杂对象，APP端navigateTo后获取不到前一个页面对数据的更新，H5正常

分类：uni-app

全局变量 navigateto vuex

用renderjs引入openlayer第三方插件，import引入vuex，父子页面之间的renderjs可以共享store数据；但是navigateTo后的页面的renderjs无法读到上一个页面的数据的更新，为什么呢？有什么解决办法吗？

renderjs相关资料太少，还请各位大神指点一二。。。

下面是关键代码

index.vue

<script module="SuperMapJS" lang="renderjs">  
    import store from '@/pages/system/store';  
        .......  
        //放入  
        store.dispatch('map/setMap', this.map)  
</script>

index.vue子页面

</template>  
    <view>  
        <!--调用视图层方法-->  
    <view id="navigateEmitView" @click="SuperMapJS.navigateEmit" style="display: none;"></view>  
    </view>  
</template>  
<script>  
         //页面跳转  
    navigate(val) {  
        if(val && val.url){  
            uni.navigateTo({  
                url: val.url  
            })  
        }  
    },  
</script>  
<script module="SuperMapJS" lang="renderjs">  
    import store from '@/pages/system/store';  
        .......  
        //视图层到逻辑层的通信  
    navigateEmit(event, ownerVm) {  
        ownerVm.callMethod('navigate', {  
            url: this.navigateUrl  
        })  
    },  
        .......  
        //拿取  
        this.map = store.getters['map/getMap']  
        console.log(this.map)  
        //!!!!正常拿到  
        .......  
        //跳转  
        document.getElementById("navigateEmitView").click();  
</script>

navigateTo页面

<script module="SuperMapJS" lang="renderjs">  
    import store from '@/pages/system/store';  
        .......  
        //拿取  
        this.map = store.getters['map/getMap']  
        console.log(this.map)  
        //!!!! map为空，拿取失败  
</script>

后来尝试过辅助函数、外置js等，在H5跳转后可以正常读取，在APP读取失败

辅助函数，mapMutations和mapActions在APP端renderjs内使用，还会报错：
TypeError: Cannot read property 'dispatch' of undefined
APP端只能用store.dispatch。。。

2022-11-23 11:17 负责人:无分享

3 个回复

1***@163.com (作者)

有资料说到，js内单独引入的store是隔离的，

renderjs引入的store.js是export一个Vuex.Store实例，和挂载到Vue实例上的$store是一个Vuex.Store实例，

会不会有影响呢？

1***@163.com (作者)

自己回答下：

UNIAPP在H5和APP端实现不同，目前我自己理解为H5是单页面应用，APP是多页面应用，是从下面官网介绍renderjs的最后一句话和自己的实践得出的结论：

H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。

所以替代方案为：
将需要共享对象的页面，把跳转后页面由navigateTo改为类似popup的弹窗，嵌入跳转前页面，风格上白底全屏等尽量做成跳转后的效果。

这样renderjs之间，window、vuex等才可以共享。

renderjs内替代方案：
uni.request => XMLHttpRequest或者axios，注意axios的then()内如果发起其他类似SuperMap请求，会受第一个axios的影响；
uni.sessionStorage => vuex或者window挂载等形式，注意APP端只能单页面内共享；

z***@gmail.com

可以用 BroadcastChannel 进行通信

const bc = new BroadcastChannel('channel');  

// 发送  
bc.postMessage('hello, world!');  

// 接收  
bc.onmessage = function(event) {  
  console.log(event.data);  
}  

bc.close();

要回复问题请先登录或注册

UNIAPP renderjs vuex共享复杂对象，APP端navigateTo后获取不到前一个页面对数据的更新，H5正常

3 个回复

公告

相关问题

UNIAPP renderjs vuex共享复杂对象，APP端navigateTo后获取不到前一个页面对数据的更新，H5正常

与内容相关的链接

3 个回复

公告

相关问题