Architecture
Architecture
  • 发布:2022-04-01 11:39
  • 更新:2022-04-02 14:27
  • 阅读:1273

【报Bug】HbuilderX 3.4.3 使用nvue+vue3的VUEX有错误

分类:HBuilderX

产品分类: HbuilderX

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 22000.434

HBuilderX版本号: 3.4.3

操作步骤:

1:创建新的hbuilder项目使用vue3
2:根据官方示例安装vuex
3:将index.vue文件修改为index.nvue
4:使用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
2022-04-01 11:39 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

  • Architecture (作者)

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


    2022-04-02 02:21

DCloud_UNI_Anne

DCloud_UNI_Anne

  • Architecture (作者)

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


    2022-04-02 23:14

  • Architecture (作者)

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


    2022-04-02 23:18

  • Architecture (作者)

    今天白天没上线。


    2022-04-02 23:19

哈哈柚

哈哈柚

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

要回复问题请先登录注册