app端vuex的state中数据不更新

分类：uni-app

如下是store/index.js的代码

import Vue from "vue"  
import Vuex from "vuex"  

Vue.use(Vuex);  

const store = new Vuex.Store({  
    state: {  
        viewer: '1111111111', // 在这里定义你的viewer  
    },  
    mutations: {  
        setViewer(state, newViewer) {  
            state.viewer = newViewer;  
            console.log('---------------setViewer----------------');  
            console.log('--------vuex中的viewer为:' + state.viewer + '-----------');  
        }  
    },  
    getters: {  
        getViewer: state => {  
            console.log('---------------getViewer----------------');  
            console.log('--------vuex中的viewer为:' + state.viewer + '-----------');  
            return state.viewer;  
        }  
    },  
})  

export default store

在初始化viewer以后，我通过两个commit来测试：

store.commit('setViewer', '2222222');  
store.commit('setViewer', this.viewer);

在浏览器端打印如下：
17:38:19.638 ---------------setViewer---------------- at store/index.js:13
17:38:19.640 --------vuex中的viewer为:2222222----------- at store/index.js:14
17:38:19.647 ---------------setViewer---------------- at store/index.js:13
17:38:19.655 --------vuex中的viewer为:[object Object]----------- at store/index.js:14
17:38:22.141 拿到的viewer:[object Object] at components/BasicFunction.vue:197
17:38:22.149 vuex中的viewer:[object Object] at components/BasicFunction.vue:198
在app端打印如下：
17:38:23.568 ---------------setViewer---------------- at store/index.js:13 at app-view.js:1607
17:38:23.569 --------vuex中的viewer为:2222222----------- at store/index.js:14 at app-view.js:1607
17:38:23.569 ---------------setViewer---------------- at store/index.js:13 at app-view.js:1607
17:38:23.569 --------vuex中的viewer为:[object Object]----------- at store/index.js:14 at app-view.js:1607
17:38:47.482 拿到的viewer:1111111111 at components/BasicFunction.vue:197
17:38:47.484 vuex中的viewer:1111111111 at components/BasicFunction.vue:198

可以看到虽然setViewer中已经打印出state.viewer是正确的对象，但是实际拿到的仍然是store中初始化定义的viewer：1111111111，请问如何解决

595 (作者)

您好，根据您的回答我将this.setViewer(this.viewer);替换成了this.setViewer(this.viewer)，在浏览器上可以正常运行，但是在移动端上报错：Uncaught TypeError: Cannot read property 'commit' of undefined at app-view.js:2734，这个错误我之前使用this.$store.commit也遇到过，后来我在每个组件开头都引入store：import store from "@/store/index.js"从而解决了这个错误，但是这里我并没有使用commit

2024-03-19 09:49
HRK_01

回复 FoxHunter: 你这个回复我看不太懂，你不是使用了commit了吗？

2024-03-21 20:23
595 (作者)

回复 HRK_01: 不好意思回复的时候打错了，我本来是使用store.commit来把viewer传给vuex，这里看了楼主的回答后使用了this.setViewer(this.viewer)，但是报错Cannot read property 'commit' of undefined

2024-03-22 10:23

595 (作者)

{

"dependencies": {

"request": "^2.88.2",

"vue": "^2.7.16",

"vuex": "^3.6.2"

}

}

使用的是vue2，vuex的版本也已经调整过了

2024-03-21 14:13
595 (作者)

在另一个组件中我实现了对地图的放大功能，在这个功能调用的函数中，我通过

console.log('拿到的viewer:' + this.viewer);

console.log('vuex中的viewer:' + store.state.viewer);

来检查拿到的viewer以及vuex中viewer的情况，结果打印的仍然是初始值1111111111，也尝试过将初始值设置为null或者空或者一个空对象，都没用。

2024-03-21 14:26
HRK_01

回复 FoxHunter: 我测试了几遍还是未复现你的问题，希望你能提供一下问题工程zip附件

2024-03-21 20:24
HRK_01

楼上的示例demo也是正常使用的，你可能没有测过，可以参考一下他的

2024-03-21 20:25
595 (作者)

回复 HRK_01: 您好，我已经上传了问题工程zip附件

2024-03-22 10:21

HRK_01

你这个示例工程运行不起来，应该是你删了什么东西，能否重新新建一个项目提供一个更精简的代码呢

2024-03-22 11:48
595 (作者)

回复 HRK_01: 抱歉，我已经重新上传了一个，我这边测试过可以运行，如果地球没有出来的话麻烦您重新运行几次试试

2024-03-22 14:31
595 (作者)

回复 HRK_01: 我这边测试的情况是跟问题描述是一样的，地球出来后您点击“放大”，在内置浏览器上应该是可以正常放大，并且打印的viewer是一个对象。但是在模拟器、移动端中，点击后无法放大，打印的viewer是null

2024-03-22 14:34

木杉丶

renderjs是一个运行在视图层的js，不能直接访问逻辑层数据也不可以使用 uni 相关接口，看了一下我感觉就是<script module="Cesium" lang="renderjs">问题，你在那个vue页面然后要传数据过去给vuex，其实实际应该是没传过去，全局的vue store根本没执行到，所以你别的页面拿不到store数据，至于你打印应该只是打印了单纯的import store from '@/store/index.js'调用的一个打印方法，所以你要不只能那个页面去掉lang="renderjs" 然后把代码能正常执行好，不然估计还是拿不到数据

2024-03-22 16:25
595 (作者)

回复木杉丶是的，但是我想在uniapp引入Cesium并且使用document的话，貌似只能通过renderjs。打印应该是拿到了store中的值，可以打印出来store中viewer的值。所以我想来问问移动端是否真的是取不到值

2024-03-22 16:42
木杉丶

回复 FoxHunter: Cesium 应该不只是renderjs可以使用把，ref 获取然后再去调用不行吗

2024-03-22 17:10
595 (作者)

回复木杉丶: https://blog.csdn.net/VarLInKe/article/details/119568955

我是看的这个，然后找了一个uniapp引入cesium的demo，然后就一直卡在传递viewer了

2024-03-22 17:41
木杉丶

回复 FoxHunter: https://gitee.com/zlxfun/uniapp-renderjs-echarts/blob/master/renderjs-echarts-dome/pages/communication.vue 用这个应该可以试了一下

2024-03-22 18:31
HRK_01

回复 FoxHunter: 看了一下你的代码，你是在视图层里面设置的vuex数据，然后在逻辑层里面去拿vuex的数据，你要知道一个知识点：在APP端逻辑层跟视图层是数据是不互通的。你需要将this.viewer通过ownerInstance传递到逻辑层，但是这个viewer对象比较复杂，无法直接传递，涉及到对自身对象的引用，需要你自身做一些处理。

2024-04-01 14:44
595 (作者)

回复 HRK_01: 原来如此，明白，非常感谢！

2024-04-01 17:23

595 (作者)

谢谢！

2024-04-01 17:23
595 (作者)

您好！请问$ownerInstance不是必须通过点击来触发嘛，然后使用了您贴的代码，打印出来的是：

15:22:49.602 ---------------setViewer---------------- at store/index.js:14

15:22:49.604 --------vuex中的viewer为:[object Object]----------- at store/index.js:15

15:22:49.723 逻辑层打印, [Object] {"_dataSourceChangedListeners":{},"_automaticallyTrackDataSourceClocks":true,"_container":{...} at components/InitCesium.vue:149

15:23:08.393 拿到的viewer:[object Object] at components/BasicFunction.vue:194

15:23:08.433 vuex中的viewer:[object Object] at components/BasicFunction.vue:195

但是无法实现放大功能，是不是uniapp不适合用来实现cesium相关项目呢

2024-04-03 15:23
595 (作者)

我尝试将你的代码放到项目中，但是经过测试，虽然拿到的viewer都显示是个对象，但是这个经过JSON.stringify传递的viewer貌似是有一点问题。

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'x' of undefined"

found in

---> <BasicFunction> at components/BasicFunction.vue

我点击放大按钮后会出现这个报错，但是我在放大功能函数中没有“x”这个变量，应该是viewer中的错误

2024-04-03 15:53
HRK_01

回复 FoxHunter: 是有问题，上面说了viewer里面有很多不给序列化的东西，但是想要让视图层跟逻辑层通信又只能先序列化对象，暂时没有什么好办法。

2024-04-03 17:03
595 (作者)

回复 HRK_01: 那请问您还有什么建议的解决办法吗，还能通过其他方式引入cesium从而避开renderjs嘛

2024-04-07 09:36
HRK_01

回复 FoxHunter: 要引入这种操作dom的库，只能通过renderjs

2024-04-07 11:31

app端vuex的state中数据不更新

7 个回复

公告

相关问题

app端vuex的state中数据不更新

与内容相关的链接

7 个回复

公告

相关问题