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

【报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,我前几天提交了修改,并没有被通过

该问题目前已经被锁定, 无法添加新回复