uni-app HbuilderX 3.4.3 使用nvue+vue3的VUEX有错误

开发环境	版本号	项目创建方式
PC	Windows
	22000.434
HBuilderX	3.4.3

操作步骤：

创建新的hbuilder项目使用vue3
根据官方示例安装vuex
将index.vue文件修改为index.nvue
使用mapstate（仅在使用map后发生问题）【注意，请查看是否为BUG】已找到解决办法。将注释部分(//import Vuex from ‘vuex’)(//Vuex)取消注释即可解决问题，但是uniapp官方示例里的vuex安装方法，却没有这两行。导致在特定条件下，nvue+vue3+vuex就会导致错误发生。如果是vue+vue3+vuex就算注释掉这两行，也不会导致有任何错误，而且就算是nvue+vue3+vuex在不使用mapstate也不会有任何错误。

预期结果：

正常使用vuex

实际结果：

报错误

bug描述：

【注意】此错误仅在mapState，使用这些方法的时候会报错。用官方VUEX方式安装，即可重现错误。文件使用vue则无错误。如果将文件修改为nvue则会有下面的错误提示： reportJSException >>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->Uncaught TypeError: (0 , import_vuex.createStore) is not a function index.vue如下：

import {mapState} from 'vuex' //引入mapState  
export default {  
    data() {  
        return {  
            title: 'Hello'  
        }  
    },  
    onLoad() {  

    },  
    methods: {  

    },  
    computed: {  
        ...mapState({  
            username: state => state.username,  
            age: state => state.age,  
        })  
    }  
}

./store/index.js如下：

import { createStore } from 'vuex'  
const store = createStore({  
    state:{  
        "username":"foo",  
        "age":18  
    }  
})  

export default store

main.js如下：【注意】已找到解决办法。将注释部分(//import Vuex from ‘vuex’)(//Vuex)取消注释即可解决问题，但是uniapp官方示例里的vuex安装方法，却没有这两行。导致在特定条件下，nvue+vue3+vuex就会导致错误发生。如果是vue+vue3+vuex就算注释掉这两行，也不会导致有任何错误，而且就算是nvue+vue3+vuex在不使用mapstate也不会有任何错误。

import App from './App'  

// #ifndef VUE3  
import Vue from 'vue'  
Vue.config.productionTip = false  
App.mpType = 'app'  
const app = new Vue({  
    ...App  
})  
app.$mount()  
// #endif  

// #ifdef VUE3  
import store from './store'  
//import Vuex from 'vuex'  
import { createSSRApp } from 'vue'  
export function createApp() {  
  const app = createSSRApp(App)  
  app.use(store)  
  return {  
    app,  
    //Vuex  
  }  
}  
// #endif

ionicwang 1楼

根据哪里的官方示例安装vuex？请详细说明。参考vue2 升 vue3 指南如果还有问题提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

itying888 2楼

已经再次修改了文章。请查看问题复现。只要在main.js里加入import Vuex from 'vuex’以及在return里加入Vuex返回即可解决问题。但是uniapp官方示例里没有加这两行。而且，就算是nvue+vue3，在不实用mapstate的情况下，也正常无问题。所以问题只在特定条件下产生。而且若不是.nvue文件而是.vue文件则注释掉这两行代码，也能正常使用mapstate。所以问题仅在特定条件下产生。请看一下是BUG还是需要修改官方示例文档？

h691938207 3楼

uniapp官方示例是指哪里的示例？ vue2 升 vue3 指南文档里有说明

htzhanglong 4楼

是的。但需要 import Vuex from ‘vuex’ ，这句话在所有文档里漏掉了。

bupafengyu 5楼

又看了一下文档。已经加上了，赞一个。

eggper 6楼

今天白天没上线。

sinazl 7楼

文档没有引入vuex,我前几天提交了修改，并没有被通过

zlyuanteng 8楼

感谢你的补充，已合并提交

eggper 9楼

回复 DCloud_UNI_Anne: 赞一个

nodeper 10楼

在使用 uni-app 的 HBuilderX 3.4.3 版本时，如果你在 nvue 页面中使用 Vue 3 和 Vuex 遇到错误，可能是由于以下几个原因导致的。以下是一些常见的解决方案和排查步骤：

1. 确保 Vuex 版本兼容

Vue 3 需要使用 Vuex 4 版本。如果你使用的是 Vuex 3，可能会导致不兼容问题。

npm install vuex@next

2. 检查 Vuex 的初始化

确保你在 main.js 或 main.ts 中正确初始化了 Vuex。

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 确保路径正确

const app = createApp(App);
app.use(store);
app.mount('#app');

3. 确保 `store` 文件正确

检查 store 文件是否正确导出了 store 实例。

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    // 你的状态
  },
  mutations: {
    // 你的 mutations
  },
  actions: {
    // 你的 actions
  },
  getters: {
    // 你的 getters
  }
});

4. `nvue` 页面的特殊性

nvue 页面在 uni-app 中使用的是原生渲染引擎，可能会有一些与 vue 页面不同的行为。确保你在 nvue 页面中正确使用了 Vuex。

// nvue 页面中使用 Vuex
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['someState'])
  },
  methods: {
    ...mapActions(['someAction'])
  }
}

5. 检查 HBuilderX 版本

确保你使用的 HBuilderX 版本是最新的，或者至少是支持 Vue 3 和 Vuex 4 的版本。如果有更新，建议升级到最新版本。

6. 调试和日志

如果问题仍然存在，可以尝试在代码中添加一些日志，查看 Vuex 的状态和操作是否正确执行。或者使用 Vue Devtools 进行调试。

7. 检查控制台错误

查看浏览器的开发者工具或 HBuilderX 的控制台输出，看看是否有具体的错误信息。根据错误信息进一步排查问题。

8. 社区支持

如果以上方法都无法解决问题，可以在 uni-app 的官方社区或 GitHub 仓库中寻求帮助，提供详细的错误信息和代码片段，以便其他人更好地帮助你。

示例代码

以下是一个简单的 Vue 3 + Vuex 4 在 uni-app 中的示例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

// store/index.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  }
});

<!-- nvue 页面 -->
<template>
  <view>
    <text>Count: {{ count }}</text>
    <text>Double Count: {{ doubleCount }}</text>
    <button @click="increment">Increment</button>
  </view>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>