Pinia是什么?
pinia的官方介绍是:符合直觉的 Vue.js 状态管理库,类型安全、可扩展性以及模块化设计。 甚至让你忘记正在使用的是一个状态库。(其实主要的就是在vue3发布以后,针对Vuex的一个升级版,所以核心的状态管理逻辑是相同的,但是操作就更改了许多)
Pinia的官方网址
Pinia | The intuitive store for Vue.js(点击箭头指向位置可以换成中文模式)
有哪些优势?
①、vue2/3都可以用。
②、pinia中只有state、getter、action,抛弃了Vuex中的Mutation,用法更简单了。
③、pinia 中 action支持同步和异步 pinia 不用在使用模块(module)对store进行分割。
④、pinia 支持插件来扩展自身功能。
⑤、支持服务端渲染 (SSR)
基本使用步骤
1、 首先进行我们的项目创建(vue3发布后推出了一个新的脚手架工具creat-vue,工具是不需要独立去安装的,可以使用命令帮助我们进行项目创建)
npm init vue@latest
然后输入我们的项目名字,在否引入 Pinia 用于状态管理,我们选择是,后续一些选项可以根据自身需求进行选择
然后项目就创建完成
2、安装依赖(我们需要进入到项目目录下)
在项目目录下通过npm i 进行依赖的安装(之前使用vue cli的时候是直接帮我们安装好依赖了,但是这个就需要我们手动操作下)
3、运行项目
安装好依赖,我们输入npm run dev 来运行我们的项目
npm run dev
(启动时非常快的,这里明显使用的是Vite,就不再使用的是基于Webpack的)
打开页面是这个样子的
打开目录的src我们在main.js中可以看见
app.use(createPinia())
app.use(router)
这里通过app.use的写法来引入官方插件,这里并没有写一些明显的Pinia的配置项
更多别的知识也可以在官方文档中查看到