uni-app nvue页面 store状态库的状态丢失 vue页面状态正常

uni-app nvue页面 store状态库的状态丢失 vue页面状态正常

开发环境 版本号 项目创建方式
Windows Windows 10 家庭中文版 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.99

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：RedmiK30

页面类型：nvue

vue版本：vue2

打包方式：离线

项目创建方式：HBuilderX

操作步骤：

import {  
    commonFunction  
} from "@/common/js/common.js"  
changeCollect(item) {  
    commonFunction.checkUserLogin("/pages/technician/technician").then(res => {  
      var params = {  
        jishi_id: item.jishi_id,  
        access_token: this.$store.state.userInfo.access_token  
      }  
      addOrCancelShouCang(params).then((res) => {  
        console.log(res,"addOrCancelShouCang");  
        if (res.status!==1) return showTips(res.msg)  
        this.item.is_shoucang = !this.item.is_shoucang;  
        if (this.item.is_shoucang) {  
          showTips('收藏成功')  
          this.item.shoucang_total++  
        } else {  
          showTips('已取消收藏')  
          this.item.shoucang_total--  
        }  
      });  
    });  
        },  

checkUserLogin: function (backUrl = '') {  
    return new Promise((resolve, reject) => {  
      if (store.state.userInfo.wx_id == '' || store.state.userInfo.access_token == '') {  
        try {  
//#ifdef APP  
            console.log("store.state", store.state);  
            uni.navigateTo({  
              url: '/pages/index/login'  
            });  
          //#endif

预期结果：

nvue和vue页面的store状态库公用，不用到nvue页面就把状态丢掉了

实际结果：

nvue页面打印store出来发现，状态丢失了。问题描述有截图

bug描述：

用的vue2，然后nvue页面在app环境下，store状态库的状态丢失。具体情况是：它是这样，nvue页面store正常，但是引入的js文件中，打印出来的store就会丢掉状态。在common.js中 引入store的方式 import store from '@/store/index'

更多关于uni-app nvue页面 store状态库的状态丢失 vue页面状态正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

hello 官方不再维护nvue，建议升级uni-app x

更多关于uni-app nvue页面 store状态库的状态丢失 vue页面状态正常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是nvue环境下常见的状态管理问题，主要原因是nvue和vue的运行环境差异导致的。以下是关键点分析：

  1. nvue页面和vue页面虽然可以共享同一个store实例，但在nvue中通过js模块引入store时，确实可能出现状态丢失的情况。

  2. 根本原因是nvue运行在原生渲染环境下，与vue的js运行环境存在隔离，特别是在通过模块引入时可能导致store实例不一致。

  3. 解决方案建议：

  • 在nvue页面中直接使用this.$store访问状态，而不是通过引入的js文件访问
  • 或者将store作为参数显式传递给公共方法
  1. 对于当前代码的修改建议：
// 修改common.js中的方法，接收store参数
checkUserLogin: function (store, backUrl = '') {
  return new Promise((resolve, reject) => {
    if (store.state.userInfo.wx_id == '' || store.state.userInfo.access_token == '') {
      // ...
    }
  });
}
  1. 调用时改为：
commonFunction.checkUserLogin(this.$store, "/pages/technician/technician")
回到顶部