快速掌握状态管理工具Pinia

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的配置项

更多别的知识也可以在官方文档中查看到

简介 | Pinia

猜你喜欢

转载自blog.csdn.net/weixin_63776631/article/details/138493735