Pinia 快速入门

Posted 2023-05-01

参考技术A Pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案
Pinia 支持 Vue2 和 Vue3

符合直觉，易于学习
极轻， 仅有 1 KB
模块化设计，便于拆分状态

安装需要 @next 因为 Pinia 2 处于 beta 阶段, Pinia 2 是对应 Vue3 的版本

创建一个 pinia（根存储）并将其传递给应用程序：

Store 是一个保存状态和业务逻辑的实体，可以自由读取和写入，并通过导入后在 setup 中使用
创建一个 store

Pinia 中的 Getters 作用与 Vuex 中的 Getters 相同，但使用略有差异
Pinia 中的 Getters 直接在 Store 上读取，形似 Store.xx，就和一般的属性读取一样

Pinia 没有 Mutations，统一在 actions 中操作 state，通过this.xx 访问相应状态
虽然可以直接操作 Store，但还是推荐在 actions 中操作，保证状态不被意外改变
action 和普通的函数一样
action 同样可以像 Getter 一样访问其他的 Store，同上方式使用其它 Store，这里不在赘述,详细请移步 官方文档 Actions

Pinia 相比 Vuex 更加简单，而且 Pinia 可以自由扩展 官方文档 Plugins
Pinia 是符合直觉的状态管理方式，让使用者回到了模块导入导出的原始状态，使状态的来源更加清晰可见
Pinia 的使用感受类似于 Recoil ，但没有那么多的概念和 API，主体非常精简，极易上手（Recoil 是 Facebook 官方出品的用于 React 状态管理库，使用 React Hooks 管理状态）
Pinia 2 目前还在 Beta 状态，不建议在生产环境中使用，不过相信稳定了以后会成为 Vue 生态中另一大状态管理方案

使用Vite快速构建Vue3+ts+pinia脚手架

一、前言

vue3的快速更新，很多IT发展快的地区在22开始都已经提上日程，小编所在的青岛好像最近才有点风波。vue3的人才在青岛还是比较稀缺的哈，纯属小编自己的看法，可能小编是个井底之蛙！！

​​vue2+webpack​​​的时代要过去了，主要是启动时间太慢了。所以还是比较推荐使用​​Vite​​​进行构建，vue3官方也是推荐的！！速度快，基本上是秒启动级别的！带的例子还是vue3最新的组合式语法糖​​setup​​。

二、vite介绍和搭建

1. 介绍

​​Vite官网​​

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的作者！

Vite3 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

2. 搭建

废话不多说咱们直接构建：

要使用 Vite 来创建一个 Vue 项目，非常简单：

npm

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。

随后输入项目名称即可

随后进行一顿操作进行构建脚手架：

3. 参数解释

为了大家可以更清楚看到，在下面在写一遍：

问题	翻译	选择
√ Project name:	项目名称	vite-vue3
√ Add TypeScript?	使用ts新语法	Yes
√ Add JSX Support?	可以使用嵌入	Yes
√ Add Vue Router for Single Page Application development?	添加路由	Yes
√ Add Pinia for state management?	存储库	Yes
√ Add Vitest for Unit Testing?	单元测试	No
√ Add Cypress for both Unit and End-to-End testing?	单元测试	No
√ Add ESLint for code quality?	es语法检测	Yes
√ Add Prettier for code formatting?	语法样式	Yes

4. 在idea中使用

安装依赖

npm install

安装es语法检查

npm

运行项目

npm

启动还是很快的！！

页面正常，搞定手工！

5. vue3语法糖

这可以是一个vue3文件的模板

<script setup lang="ts">import TheWelcome from "../components/TheWelcome.vue";</script>

<template>
  <main>
    <TheWelcome />
  </main>
</template>
<style lang="less">

</style>

三、Pinia 介绍

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。
如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 ​​​export const state = reactive()​​。这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。 但即使在小型单页应用程序中，您也可以从使用 Pinia 中获得很多好处：

dev-tools 支持

• 跟踪动作、突变的时间线
• Store 出现在使用它们的组件中
• time travel 和 更容易的调试

热模块更换

• 在不重新加载页面的情况下修改您的 Store
• 在开发时保持任何现有状态

插件：使用插件扩展 Pinia 功能
为 JS 用户提供适当的 TypeScript 支持或 autocompletion
服务器端渲染支持

​​Pinia ​​​：是新版的​​vuex​​​，简化了​​vuex​​​，效率更快，上手更快，推荐推荐大家在​​vue3​​​使用，当然他也支持​​vue2​​。

pinia的图标还是比较可爱的！！

​​pinia官网​​

四、总结

这样就搭建成功了，其实很简单，主要是借此聊聊Vue3+ts+pinia，新东西还是要多接触，虽然咱是后端，技多不压身嘛！！

---

有缘人才可以看得到的哦！！！

​​点击访问！小编自己的网站，里面也是有很多好的文章哦！​​