一、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提供了大量能使我们快速便捷地处理数据的函数和方法。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163317.html

pinia