uni-app HBuilderX 3.4.6.20220420 不支持 pinia

类别	信息
产品分类	uniapp/小程序/微信
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win10
HBuilderX类型	正式
HBuilderX版本号	3.4.6
项目创建方式	HBuilderX

bug描述：升级到HBuilderX 3.4.6.20220420后发现vite使用的是2.9.6出现pinia报错
回退到HBuilderX 3.3.13发现使用的vite 2.8.4一切正常
注：是编译到小程序
pinia版本^2.0.13

caililin 1楼•18 天前

我也是这样。。。今天一更新项目跑不起来了，报这个错误。。。

vueper 2楼•18 天前

临时解决办法，回到HBuilderX 3.3.13 在安装目录中复制出 plugins\uniapp-cli-vite 如 D:\HBuilderX\plugins\uniapp-cli-vite 然后切换到最新版，把之前复制出来来复制进去，，等待官方解决

eggper 3楼•18 天前

那下次再更新新版本还需不需要去处理plugins\uniapp-cli-vite这个文件，新版本的会覆盖这个文件吗？

zlyuanteng 4楼•18 天前

回复 Linuyx: 如果官方没解决这个bug。把旧版的uniapp-cli-vite存一份，随时复制临时解决吧

gougou168 5楼•18 天前

回复慕容长空: 好嘞，谢谢你了

bupafengyu 6楼•18 天前

在目录 HBuilderX 安装目录\plugins\uniapp-cli-vite 打开命令行，执行命令 yarn add pinia 后重新运行即可。

zlyuanteng 7楼•18 天前

HBuilderX 3.4.7+ 已修复

gougou168 8楼•18 天前

在 uni-app 项目中，HBuilderX 3.4.6.20220420 版本确实可能不支持 Pinia，因为 Pinia 是一个相对较新的状态管理库，而 HBuilderX 的更新可能没有及时跟上最新的前端生态。

不过，你仍然可以通过以下步骤在 uni-app 项目中使用 Pinia：

1. 安装 Pinia

首先，你需要在项目中安装 Pinia。打开终端，进入你的项目目录，然后运行以下命令：

npm install pinia

或者使用 yarn：

yarn add pinia

2. 创建 Pinia Store

在你的项目中创建一个 store 目录，并在其中创建一个 store 文件，例如 store/index.js：

// store/index.js
import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

3. 在 main.js 中引入 Pinia

在你的 main.js 文件中引入 Pinia 并将其挂载到 Vue 实例上：

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

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

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

4. 在组件中使用 Pinia

现在你可以在组件中使用 Pinia 来管理状态了。例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { useMainStore } from '@/store/index';

export default {
  setup() {
    const mainStore = useMainStore();

    return {
      count: mainStore.count,
      increment: mainStore.increment,
    };
  },
};
</script>