uni-app nvue 页面无法监听vuex 变量

uni-app nvue 页面无法监听vuex 变量

开发环境 版本号 项目创建方式
Windows win11 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win11

HBuilderX类型：正式

HBuilderX版本号：3.2.9

手机系统：Android

手机系统版本号：Android 7.1.1

手机厂商：模拟器

手机机型：模拟器

页面类型：vue

打包方式：云端

项目创建方式：HBuilderX

### 示例代码：

```html
computed:{
onlogin(){
return this.$store.state.login
}
},
watch: {
onlogin(newValue, oldValue) {
this.user_info = this.$store.state.userinfo;
this.login = newValue;
}
}

操作步骤：

任意一个nvue 用watch 来监听 vuex 里的变量，然后 其他页面改动该变量值，监听不到，但是输出的时候确实改变了

预期结果：

按照上个hb版本，也就是v2.0 能正常监听vuex

实际结果：

3.0 nvue无法监听vuex

bug描述：

nvue 页面无法监听 vuex 里的变量刷新， 就是这次更新了HBuilderX 后出现的好像，这是更新后 我把项目也切换到vue3.0了，不知道是不是 3.0不支持nvue 的原因，但是能正常调试开发，就是vuex 监听不到了，也无法打包，请官方给个回复


更多关于uni-app nvue 页面无法监听vuex 变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

vue 3.0支持vuex的。我现在在写的项目就在用，你自己 代码如下，你自己倒弄

main.js import App from ‘./App’ //引入 App.vue（ APP的第一个入口文件 ）
import store from ‘./store/index.js’ //引入vuex
import { createSSRApp } from ‘vue’ //引入Vue库
export function createApp(){
const app = createSSRApp(App)//创建一个 Vue 实例
app.use(store)//应该是挂载的意思
return {app}
}

根目录/store/index.js import { createStore } from ‘vuex’
const store = createStore({//教程 https://vuex.vuejs.org/zh/guide/state.html
state: {//单一状态树【变量必须写在这里面】
user: {

    },  
    cdn                 : undefined,  
    yuming              : undefined,  
    qianduan_yuming     : undefined,  
    isPx                : undefined,  
    bodyWidth           : undefined,  
    htmlWidth           : undefined,  
    htmlHeight          : undefined,  
    bodyLeftWidth       : undefined,  
    pixelRatio          : undefined,  
    statusBarHeight     : undefined,  
    isAndroid           : undefined,  
},  
mutations: {  

}

})
export default store

其他页面，直接 this.$store.state.yuming

更多关于uni-app nvue 页面无法监听vuex 变量的实战教程也可以访问 https://www.itying.com/category-93-b0.html


监听的话，就直接 watch: { ‘$store.state.cdn’: function(){ console.log(‘监听到变化了’); }, } 上面代码测试过的

回复 2***@qq.com: 谢谢你的回复，但是经过测试，是因为vue3 根本不支持nvue，官方不支持，虽然确实能调试，bug 也不少， 打包的时候你就知道啥叫不支持了

回复 空白人吗: 可以打包啊，我就是nvue的vue3.刚刚试了一下，没问题https://ide.dcloud.net.cn/build/download/49fa0820-3330-11ec-add5-c738728ee974

回复 2***@qq.com: 难道更新啦？我上回打包，一直报错，看不懂的错，。。。不是代码问题，我换成vue2 就成功了

回复 空白人吗: 那就不清楚了，不过vue3的确没支持多久

回复 空白人吗: https://ask.dcloud.net.cn/question/124464 你看一下这篇文章的评论，官方人员也说了 nvue支持vue3

回复 2***@qq.com: 好

我也测试了，确实nvue不支持vue3的vuex的watch监听 如果是.vue格式的可以监听到 但是.nvue格式的就无法监听

在 uni-app 的 nvue 页面中，监听 Vuex 状态确实存在一些限制，尤其是在 Vue 3 环境下。根据你的描述，问题可能源于以下几个方面：

  1. Vue 3 响应式系统变化：Vue 3 使用 Proxy 实现响应式，而 nvue 页面在部分情况下对 Vue 3 的响应式支持可能存在兼容性问题。Vuex 4（Vue 3 配套版本）的状态在 nvue 中可能无法被 watch 正常监听。

  2. nvue 页面特性：nvue 页面基于原生渲染，其数据更新机制与 Vue 页面略有不同。在 Vue 3 中，部分响应式 API 在 nvue 中可能需要额外处理。

  3. Vuex 状态监听方式：在 nvue 页面中，直接通过 watch 监听 computed 返回的 Vuex 状态可能无法触发更新。

解决方案：

  1. 使用 computed 直接获取状态：
    在 nvue 页面中，优先通过 computed 获取 Vuex 状态，并在模板中直接使用。避免依赖 watch 监听变化，因为 computed 属性会自动响应状态更新。

  2. 使用 Vuex 的 subscribe API：
    在页面生命周期中，通过 Vuex 的 subscribe 方法监听状态变化，手动触发更新。例如：

    mounted() {
  this.unsubscribe = this.$store.subscribe((mutation, state) => {
    if (mutation.type === 'updateLogin') {
      this.user_info = state.userinfo;
      this.login = state.login;
    }
  });
},
beforeUnmount() {
  this.unsubscribe();
}
回到顶部