vue3 Pinia详解使用详解

1. Pinia 是什么

1. Pinia 是 Vue 的专属的 最新状态管理库
2. 是 Vuex 状态管理工具的替代品和 Vuex 一样为 Vue 项目提供共享状态管理工具
3. 并且支持vue2和vue3，主要是为vue3提供状态管理，支持typescript
4. Pinia可以创建多个全局仓库，不用像 Vuex 一个仓库嵌套模块，结构复杂。管
   理数据简单，提供数据和修改数据的逻辑即可，不像Vuex需要记忆太多的API

2. Pinia 功能作用

1. 提供更加简单的API （去掉了 mutation ）
2. 提供符合组合式风格的API （和 Vue3 新语法统一）
3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块
4. 配合 TypeScript 更加友好，提供可靠的类型推断

3. 手动添加Pinia到Vue项目

Pinia可以在项目创建时自动添加，现在我们初次学习，从零开始： 2.1 使用 Vite 创建一个空的TS + Vue3项目

npm create vite@latest vue-pinia-ts -- --template vue-ts

按照官方文档安装 pinia 到项目中

cnpm i pinia

4. Pinia基础使用

1. 在 src 中定义一个 stores 文件夹，新建 counter.ts 文件
2. counter.ts 组件使用 store

import {
    defineStore } from 'pinia'
import {
    ref } from 'vue'
export const useCounterStore = defineStore('counter', () => {
   
    // 数据（state）
    const count = ref