vue3的pinia(大菠萝)

一：Pinia 简介和五大优势

Pini a是vue 生态里Vue x的替代者，一个全新的vue 状态管理库。在Vue3 成为正式版以后，尤雨溪强势推荐的项目就是Pini a。
那先来看看Pini a比Vue x好的地方，也就是Pini a的五大优势。

可以对Vue2和Vue3做到很好的支持，也就是老项目也可以使用Pini a。

抛弃了Mu ta t ion s的操作，只有state、getters和actions.极大的简化了状态管理库的使用，让代码编写更加容易直观。

不需要嵌套模块，符合Vue3的Co m position api ，让代码更加扁平化。

完整的Ty peScri pt支持。Vue3版本的一大优势就是对Ty p eSc ript的支持，所以Pini a也做到了完整的支持。如果你对Vue x很熟悉的化，一定知道Vue x对TS的语法支持不是完整的（经常被吐槽）。

代码更加简洁，可以实现很好的代码自动分割。Vue2的时代，写代码需要来回翻滚屏幕屏幕找变量，非常的麻烦，Vue3的Co m position api完美了解决这个问题。可以实现代码自动分割，pinia也同样继承了这个优点。

二：Pin i a 开发环境安装

1.使用Vite就需要先初始化 vite：

1|npm init vite@latest

2.初始化与启动项目

1|npm install
2|npm run dev

3.pinia的安装：

1|npm install pinia

4.装好之后可以在package.json 里面查看到，可以看到安装的pinia 最新版本是2.0.12

三：用Pin ia的方式创建一个 store

1.在main.ts 文件里引入Pin ia

1|import { createPinia } from 'pinia'

2. 引入后，通过 createPinia( )方法，得到pinia的实例，然后将Pinia挂载到Vue根实例上。

3.创建 store状态管理库,在创建的项目中创建一个 store的目录，在创建一个 js/Ts 文件

4.这个文件里的代码，我们一般只做三件事：

定义状态容器(仓库)

修改容器(仓库)中的 state

仓库中的 action 的使用

5.第一步：定义状态容器(仓库)

5.1:介绍

defineStore( ) 方法的第一个参数：相当于为容器起一个名字。注意：这里的名字必须唯一，不能重复。

defineStore( ) 方法的第二个参数：可以简单理解为一个配置对象，里边是对容器仓库的配置说明。当然这种说明是以对象的形式。

state 属性： 用来存储全局的状态的，这里边定义的，就可以是为SPA里全局的状态了。

getters属性： 用来监视或者说是计算状态的变化的，有缓存的功能。

actions属性： 对state里数据变化的业务逻辑，需求不同，编写逻辑不同。说白了就是修改 state 全局状态数据的。

6. 第二步：我们在Store里定义一个State，我们这里就写Hel lo，这时候这个hello就是全局的状态数据，是每个页面和组件都可以通过Pinia方法读取到的。

7.在vue3组件里读取Store数据

先引入 useColorStore,然后通过useColo rStore得到store实例，就可以在组件里调用 store里的state 定义的状态数据了

8.Pinia改变状态数据和注意事项

在getters属性里添加数据来计算数据的变化

在index的组件调用这两个属性，来查看数据的变化

容易踩坑的点，通过解构的数据，只有一次作用，不是响应式数据（这就是我踩的坑了）。也就是说当你改变数据状态时，解构的状态数据不会发生变化。我们这时候再点击增加按钮，可以看到只有没结构的数据发生了变化。

于是我开始查找官方文档，显然Pinia团队也发现了这个问题，提供了storeToRefs( )方法。

//导入storeToRefs方法

import { storeToRefs } from "pinia";

//有了storeToRefs( )方法后，就可以在解构的代码中，对store使用方法了。其实这时候就是把解构出来的数据作了ref响应式代理。所以数据拥有了响应式能力。

const { helloWorld, count } = storeToRefs(store);