一、pinia是什么？
🚜🚜🚜Pinia是最接近西班牙语中的菠萝的词；背景：大概2019年，是作为一个实验为Vue重新设计状态管理，让它用起来像组合式API。从那时到现在，最初的设计原则依然是相同的，同时兼容Vue2.Vue3,也并不要求你使用组合式API，本质上依然是一个状态管理的库，用于跨组件，页面进行状态共享
Pinia和Vuex的区别
🎉🎉🎉🎉Pinia最初是为了探索Vuex的下一次迭代会是什么样子，结合了Vuex5核心团队讨论中的许多想法；
最终，团队意识到Pinia已经实现了Vuex5中大部分内容，所以决定用Pinia来替代Vuex;
既然是下一个迭代，必定有大的优势，更简单的API,具有组合式风格的API;
🍟🍟在于TS一起使用时具有可靠的类型推断支持
优势
mutations 不在存在；不再有modules的嵌套结构；
可以灵活使用每一个store,他们是通过扁平化的方式来相互使用的；
也不再有命名空间的概念，不需要记住它们的复杂关系🍳🍳🍳
二、使用步骤
1.安装库
npm install pinia
2.创建一个pinia并且将其传递给应用程序：
import {createPinia} from 'pinia'
const pinia = createPinia()
export default pinia
import pinia from './store'
createApp(App).use(pinia).mount('#app')
Store
🍔🍔什么是store,是一个实体，它会持续绑定到组件树的状态和业务逻辑，也就是保存了全局的状态;
始终存在，并且都可以读取和写入组件；
可以在应用程序中定义任意数量的Store来管理状态；
Store有三个核心概念
state,getter,actions
等同于组件的data,computed,methods;
一旦store被实例化，就可以`直接在store上访问state,getters和actions中定义的任何属性；
定义一个Store
🌭🌭首先Store是使用defineStore()定义的，并且它需要一个唯一名称，作为第一个参数传递;
export const useCounter = defineStore("counter",{
state(){
return {counter:99}
}
})
第一个参数是必要的，Pinia使用它来将store连接到devtools；
返回的函数统一使用useX作为命名方案，一种约定规范；
使用
🍿🍿🍿 首先 Store在它被使用之前是不会创建的，组件中可以通过调用use函数来使用Store
<h2>{{counterStore.counter}}</h2>
import { useCounter } from '@/store/counter'
const counterStore = useCounter()
注意Store获取之后不能被解构，会失去响应式；
pinia提供了 storeToRefs()解决
const { counter:countertwo } = storeToRefs(counterStore)
认识和定义State
🧂🧂🧂state是store的核心部分，因为store是用来帮助我们管理状态的。
在pinia中，状态被定义为返回初始状态的函数；
export const useCounter = defineStore("counter",{
state(){
return{counter:88}
}
})
操作State(一)
🥓🥓🥓读取和写入state:
默认情况下，可以通过store实例访问状态来直接读取和写入状态；
const counterStore = useCounter()
conterStore.$patch({
age:20,
id:10
})
替换state
通过将其$state属性设置为新对象来替换Store的整个状态
counterStore.$state = {
age:23,
id:32
}
认识和定义Getters
🍳🧇🧇Getters相当于Store的计算属性：
可以用defineStore()中的getters属性定义；
getters中定义接收一个state作为参数的函数
export const useCounter = defineStore("counter",{
state:()=>{
firstname:"张"，
lastname:"san"
}
}),
getters:{
connectName:(state)=>state.firstname + state.lastname
}
访问Getters(一)
🍕🍕访问当前store的Getters:
const counterStore = useCounter();
console.log(counterStore.connectName)
Getter中访问自己的其他getters:
通过 `this来访问到当前store实例的所有其他属性
doublePlusOne:function(state){
return this.connectName + "我是测试"
}
访问其他store的getters:
message:function(state){
const userStore = useUser()
return this.fullname + ";" + userStore.x
}
访问Getters（二）
🍔🍔🍔getters也可以返回一个函数，用来接收参数
认识和定义actions
🍟🍟actions相当于组件中的methods
可以使用defineStore()中的actions属性定义，并且它们非常适合定义业务；
和getters一样，在action中可以通过this访问整个store实例的所有操作；
actions执行异步操作
🍟🍟并且actions中是支持异步操作的，并且可以编写异步函数，在函数中使用await;
总结
提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
