携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情。$\color{red}{pinia专栏}$将会持续更新，欢迎小伙伴们一起来学习。

$\color{skyblue}{了解pinia}$

Pinia是Vue的存储库，它允许您在组件/页面之间共享状态，它用于状态管理

$\color{purple}{为什么要使用pinia?}$

 

$\color{blue}{个人理解}$

1. pinia中只有$\color{skyblue}{state，action，getter}$ ，抛弃了Vuex中的Mutation，Vuex中mutation不能异步更新数据，pinia使用action支持$\color{skyblue}{同步和异步}$。

2. Vuex中如果数据过多，我们通常使用 $\color{red}{module}$ 分模块来进行管理，而pinia中$\color{red}{每个store}$都是独立的，我们建立新的文件夹定义另外一个store就好了，然后在引入，就可以使用，并且store之间$\color{red}{互相不影响}$。

3. Vuex中的state是不推荐直接修改数据，因为检测不到更新变化，二pinia可以$\color{red}{直接通过state更新管理的数据}$

4.$\color{purple}{pinia}$ $\color{skyblue}{支持插件来扩展自身功能，注册全局插件}$

$\color{blue}{官方}$

1. 开发工具支持

• 跟踪操作、突变的时间线

•  存储显示在使用它们的组件中

•  时间旅行和更轻松的调试

2. 热模块更换

• 修改您的商店，而无需重新加载您的页面

•  在开发时保留任何现有状态

3. 插件：使用插件扩展Pinia功能

4. 为JS用户提供适当的TypeScript支持或自动完成

5. 服务器端渲染支持

   
   

Pinia 中文文档 (web3doc.top)

Vue3+vite的构建项目

第一步

npm init vite@latest 项目名称(比如testPinia) -- --template vue

第二步 安装一些配置

Select a framework选择 vue

Select a variant在选择 vue(如果你想要ts语法，就选择vue-ts)

第三步 进入项目

cd 项目名称(比如pinia)

第四步 安装依赖包

npm i

第五步 Pinia的下载

npm i pinia

第六步  查看pinia是否安装成功

在package.josn下的dependencies查看是否有pinia

第七步 启动看看项目,点Local那一个

npm run dev

出现如下页面，即项目创建成功

$\color{skyblue}{讲一下安装vue-ts如何配置@src}$

使用过vue-cli的用户们肯定知道@代表src这个目录,但是vite没有自动配置所以我们需要手动配置

配置如下

首先是tsconfig.json配置，添加

"paths": {

"@/*": ["./src/*"] *// 这里需要配置*

}

然后是vite.config.ts

 resolve: {

      alias: {  // 这里就是需要配置resolve里的别名

        "@": path.join(__dirname, "./src"), // path记得引入

        // 'vue': 'vue/dist/vue.esm-bundler.js' 
        // 定义vue的别名，如果使用其他的插件，可能会用到别名

      },

}

同时，vetur这个插件要禁用,我们可以在Vscode中搜索Vue Language Features (Volar)和TypeScript Vue Plugin (Volar)这两个插件，同时还要下载"@types/node": "^14.18.23", 不然在vite.config.ts 使用import path from 'path'会报错 效果如下

可以发现，我们使用了@没有报错，成功引入了src/components/Person.vue组件

$\color{skyblue}{结束语}$

第一篇详细的讲解了vite的构建，以及pinia的下载，下一篇，将会更新$\color{purple}{pinia的基本使用以及state的使用}$