uni-app CLI 升级到 3.0.0-4020920240930001 之后，nvue 中 vuex 报错不可使用

发布于 1周前 作者 caililin 来自 Uni-App

uni-app CLI 升级到 3.0.0-4020920240930001 之后，nvue 中 vuex 报错不可使用

开发环境 版本号 项目创建方式
PC开发环境操作系统 Mac CLI
PC开发环境操作系统版本号 macOS 14.1
手机系统 全部
手机厂商 华为
页面类型 nvue
vue版本 vue3
打包方式 云端
CLI版本号 3.0.0-4020920240930001

测试过的手机：

Galaxy Z Flip4 (SM-F721U/DS)
Android 13

操作步骤：

  1. 下载官方模版 https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite-ts.zip
  2. 安装 vuex yarn add vuex@next --save
  3. 引入 store
  4. 在 nvue 中使用 const store = useStore()，必先报错

预期结果：

正常运行

实际结果：

报错，无法正常使用

bug描述：

CLI 从 3.0.0-4000820240401001 升级到 3.0.0-4020920240930001 之后，原先在 nvue 中可正常运行的 vuex 不可使用。报错提示为：injection “store” not found；

vuex 必然是 升级 3.0.0-4020920240930001 ，导致的无法正常使用，因为 3.0.0-4000820240401001 版本能正常运行。


Harmonyos Next教程
4 回复

感谢反馈，问题已复现，有修复进展会更新到这里
更新： 我测试 vuex@next 有问题，但是 vuex@latest 也就是 4.1.x 没有这个问题，你调整下 vuex 版本试试，看是不是 next 版本源有问题，把测试结果也告诉我


4.1.x 也不可以

回复 ksa: 我给你个复现工程吧，你看有什么区别，基于我给到复现工程说问题

在升级 uni-app CLI 到 3.0.0-4020920240930001 版本后，如果在 nvue 文件中遇到 vuex 报错提示不可使用的问题，这通常是由于 nvue 与 vue 的环境差异导致的。nvue 是基于 Weex 引擎渲染的，它并不完全支持 Vue 的所有特性和库，包括 vuex。

为了解决这个问题，你可以采取以下几种策略，但请注意，直接在 nvue 中使用 vuex 并不是官方推荐的做法。以下是一些替代方案，以及如何在 uni-app 中管理 nvue 页面状态的方法。

1. 使用全局状态管理（非 vuex）

你可以通过全局变量或全局对象来管理状态，这在 nvue 中是可行的。

示例代码：

在 main.js 或 app.js 中定义一个全局对象：

// main.js
Vue.prototype.$globalState = {
    someKey: 'someValue'
};

在 nvue 页面中访问这个全局状态：

// 在 nvue 页面脚本中
var someValue = this.$globalState.someKey;

2. 使用本地状态管理

对于简单的状态管理，你可以在 nvue 页面的 data 函数中直接管理状态。

示例代码：

<!-- 在 nvue 页面 -->
<template>
  <div>{{ someValue }}</div>
</template>

<script>
export default {
    data() {
        return {
            someValue: 'initialValue'
        };
    },
    methods: {
        updateValue(newValue) {
            this.someValue = newValue;
        }
    }
};
</script>

3. 跨页面通信

如果需要在多个 nvue 页面之间共享状态，可以使用 uni-app 提供的全局事件总线功能。

示例代码：

在 main.js 中设置全局事件总线：

Vue.prototype.$bus = new Vue();

在发送页面触发事件：

this.$bus.$emit('update-value', newValue);

在接收页面监听事件：

this.$bus.$on('update-value', (newValue) => {
    this.someValue = newValue;
});

结论

由于 nvue 的技术限制，直接在 nvue 中使用 vuex 是不被支持的。通过上述方法，你可以在 uni-app 中实现类似状态管理的功能，而无需直接依赖 vuex。这些方法虽然不如 vuex 那么强大和灵活，但在 nvue 环境中是可行的替代方案。

回到顶部