1.做什么用的❓

与vuex的作用一致，用于做网页存储的
Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态

2.优势❓

与vue3、typescript兼容较为友好
上手容易,对开发者友好
状态变更的流程更为简易
action可支持同步或者异步
等等…

3. 介绍❓

官网:https://pinia.web3doc.top/
它可以用来代替vuex

3.1、与vuex对比

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它取而代之的是新的建议。

与 Vuex 3.x/4.x 的比较#

Vuex 3.x 是 Vuex 的 Vue 2 而 Vuex 4.x 是 Vue 3
Pinia API 与 Vuex ≤4 有很大不同，即：

mutations 不再存在。他们经常被认为是非常冗长。他们最初带来了 devtools 集成，但这不再是问题。
无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。
不再需要注入、导入函数、调用函数、享受自动完成功能！
无需动态添加Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store
进行注册，但因为它是自动的，您无需担心。不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和使用来隐式嵌套Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。您甚至可以拥有 Store 的循环依赖关系。
没有命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store都是命名空间的。

4.实操使用💪

版本须知

我下边操作基于pinia2.0.30版本

4.1创建项目

我这里使用vue-cli进行创建使用
Tip:记得安装个vue-cli脚手架,也可以用vite去创建，创建vue项目我就不多说了

vue create 项目名称
cd 项目名称
npm i

根据以上步骤即可创建成功

4.2运行项目

npm run serve

这样即可运行成功,开始使用pinia

4.3使用pinia

安装

npm install pinia

全局引入挂载

在main.js下

import { createPinia } from 'pinia'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).use(createPinia()).mount('#app')

使用

在src文件夹下创建文件夹store—>index.js
用于编写pinia的状态共享内容

import { defineStore } from "pinia";

export default defineStore('main',{
    state:()=>{
        return {
            count:10,
            price:99
        }
    },
    //计算属性
    getters:{
        Sumprice:(state)=>{
            console.log('1111',state)
            return state.count*state.price;
        }
    },
    //vuex:只能是异步,pinia表示可同步也可异步
    actions:{
        async getTest(){
            let msg="消息"
            setTimeout(() => {
                msg="最终消息"
                console.log(msg);
                this.count=9999;//通过this.属性名直接赋值...
            }, 1000);
            return msg;
        },
    }
})

下方示例均基于上方pinia的内容进行使用
在使用该模块的公共属性的页面需要先引入上方文件👇

import useMainStore from './store/index.js'
const store=useMainStore();

state

用于创建公共属性,和vuex一致

getters

计算属性，用于监听state的改变

actions

编写同步异步的方法实现动态数据赋值
vuex:只能是异步,pinia表示可同步也可异步

示例

<template>
  <div>
    <h1>碰磕Age:{{ store.count }}</h1>
    <h2>{{ count }}</h2>
    <h2>总:{{ store.Sumprice }}</h2>
    <button @click="addCount">+</button>
    <button @click="patchCount">+</button>
    <button @click="pathcFnCount">+</button>
    <button @click="replaceCount">替换state</button>
    <button @click="resetCount">重置</button>

    <button @click="store.getTest()">获取数据</button>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import useMainStore from './store/index.js'
const store=useMainStore();
//方式二解构并且响应式
let {count}=storeToRefs(store);
/**
 * state修改
 */
const addCount=()=>{
  store.count++;
}

/**
 * $patch修改
 * 方便批量修改
 */
const patchCount=()=>{
  store.$patch({
    count:store.count+2
  })
}

/**
 * $patch指定修改哪个属性
 */
const pathcFnCount=()=>{
  store.$patch((state)=>{
    state.count++;
  })
}

/**
 * 将整个state直接替换
 */
const replaceCount=()=>{
  store.$state={
    count:10,
    price:99
  }
}
/**
 * 将整个state重置
 */
 const resetCount=()=>{
  store.$reset();
}

/**
 * 监听整个仓库变化
 */
store.$subscribe((mutation,state)=>{
  console.log("mutation=",mutation,"state=",state)
})
</script>

代码分析

页面中可通过store.属性名直接使用
也可以通过在js中定义属性解构返给页面使用，但想实现响应式必须依赖于storeToRefs
可通过$patch批量修改state的属性，也可以指定修改哪个属性
可通过store.$state将整个state进行替换
通过store.$reset()可实现重置
通过store.$subscribe(()=>{})可实现监听改变