Vue3中的状态管理库 ---Pinia

前言

在编写vue的项目时，会需要用到状态管理库。而vue3 中对状态管理库（pinia）进行了一些重要的更新，在这里分享给大家！

一、什么是 Pinai

• Pinia 是 一个基于Vue3的状态管理库，它允许您跨组件/页面共享状态。简单、轻量的设计理念和直观的API设计，可以让我们快速上手。
• Pinia的核心概念是Store,类似于vuex中的Store,但是更加轻便
• 并且Pinia的状态管理是基于响应式的，意味着当状态发生改变时相关组件会自动更新。
• Pinia 的官方地址为：https://pinia.vuejs.org/

二、为什么要使用pinia？

支持服务端渲染。
可以更好的支持 TypeScript pinia支持插件来扩展自身功能。
pinia 模块化设计，支持多个 store。
pinia中action支持同步和异步，Vuex不支持
pinia 是轻量级状态管理工具，大小只有1KB. 支持 Vue
devtools、SSR、webpack 代码拆分。
pinia中只有state、getter、action，没有Vuex中的Mutation减少了我们工作量。

三、安装与使用pinia

1.安装语法：npm install pinia -save / yarn add pinia
2.创建一个 pinia并将其传递给应用程序

3.在 src 文件下创建一个 store 文件夹，并添加 store.js 文件。

四、store

1.它有三个核心，state、getters 和 actions，可以把它们理解成组件里面的 data、computed 和 methods
2.项目中src下的store 文件夹下可以有多个store.js
3.store 是用 defineStore(id, options) 来定义
参数：
id：名字，必填值且唯一 参数
options：可以是对象或函数形式 对象形式【选项模式】，用来定义 state,action，getters