uni-app HBuilder 4.15 APP 使用 pinia 报错 vue.hasInjectionContext is not a function

uni-app HBuilder 4.15 APP 使用 pinia 报错 vue.hasInjectionContext is not a function

开发环境 版本号 项目创建方式
HBuilderX 4.15 HBuilderX

产品分类：HbuilderX
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：10
手机系统：Android
手机系统版本号：Android 13
手机厂商：vivo
手机机型：iqoo11s
页面类型：vue
vue版本：vue3
打包方式：云端

示例代码：

main.js 导入pinia

import App from './App'  
import { createSSRApp } from 'vue'  
import * as Pinia from 'pinia';  
const pinia = Pinia.createPinia()  
export function createApp() {  
  const app = createSSRApp(App)  
    app.use(pinia)  
  return {  
    app,  
        Pinia  
  }  
}

store/index.js

import {  
    defineStore  
} from "pinia"  

export const useCounterStore = defineStore('counter', {  
    state: () => ({  
        count: 10,  
    }),  
    actions: {  
        increment() {  
            this.count++  
        },  
    },  
})

App.vue

<script>  
    import { mapState } from 'pinia'  
    import { useCounterStore } from './store'  
    export default {  
        onShow: function() {  
            console.log(this.count)  
        },  
        computed: {  
            ...mapState(useCounterStore, ['count'])  
        }  
    }  
</script>

更多关于uni-app HBuilder 4.15 APP 使用 pinia 报错 vue.hasInjectionContext is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html

9 回复

4.14 调整了 vue 版本，请使用 hx 新版重新打包自定义基座

更多关于uni-app HBuilder 4.15 APP 使用 pinia 报错 vue.hasInjectionContext is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html


APP线上的版本也必须 整包更新 吗

回复 孤竹: 是的

回复 孤竹: 尝试一个新的方案：

在 main.js 中写入以下代码：

一个可能的完整代码，比如：

注意： 详细测试一下 Pinia 的功能是否正常

回复 DCloud_UNI_LXH: 没发现问题，可以使用

在使用 uni-app 和 HBuilder X 4.15 时，如果在 Pinia 中遇到 vue.hasInjectionContext is not a function 的错误，通常是因为 Pinia 和 Vue 版本不兼容或 Vue 版本过低导致的。

解决方案

  1. 检查 Vue 版本： 确保你使用的 Vue 版本是 3.x 版本。Pinia 是为 Vue 3 设计的，如果使用的是 Vue 2，可能会遇到兼容性问题。

    你可以通过以下命令查看当前项目的 Vue 版本：

    npm list vue

    如果版本低于 3.x，请升级 Vue：

    npm install vue[@next](/user/next)

  2. 检查 Pinia 版本： 确保你使用的 Pinia 版本是最新的稳定版。你可以通过以下命令查看当前 Pinia 版本：

    npm list pinia

    如果需要升级 Pinia，可以执行：

    npm install pinia[@latest](/user/latest)

  3. 更新 HBuilder X： 如果你使用的是 HBuilder X，确保你使用的是最新版本。旧版本的 HBuilder X 可能不支持最新的 Vue 和 Pinia 特性。你可以通过 HBuilder X 的更新功能来检查并更新到最新版本。

  4. 检查项目配置： 确保你的项目配置正确，特别是在 main.js 或 main.ts 中正确引入了 Pinia 和 Vue。

    例如：

    import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

  5. 清除缓存并重新安装依赖： 有时候，缓存或依赖安装不正确也会导致问题。你可以尝试删除 node_modules 和 package-lock.json，然后重新安装依赖：

    rm -rf node_modules package-lock.json
npm install
回到顶部