这是我参与「第五届青训营」伴学笔记创作活动的第 30 天

Pinia可以用来进行跨组件和页面的共享状态（全局状态）。它有着三个重要的组成：state、getters、actions，分别和Vue中的data、computed、methods类似。

Store

使用pinia的defineStore来定义Store，第一个参数为独一无二的名字，第二个参数可以是Setup函数或者Option对象。规范：传入的名字和文件名相同；Store名为use+名字+Store，并且为camelCase形式。

Setup

和Vue的组合式API类似，用ref来定义state，用计算属性来定义getters，用函数来定义action。记得要把这些return暴露出去。

与Vue的选项式API类似，对象一般具有state、getters、action属性，类似于Vue的选项。

import { defineStore } from 'pinia'

export const useMyStore = defineStore('my', {
	state: () => ({}),
	getters: {
	
	},
	actions: {
	}
})

可以从其他文件中导入已经定义的Store，然后在setup()中调用，记得return。就和创建其它的响应式一样。

export default {
	setup() {
		const store = useMyStore()
	}
	return {
		store
	}
}

store是经过reactive包装的对象，会进行自动解包，不能对其进行解构。

state是一个返回初始状态的函数，推荐使用箭头函数。还可以添加sate的返回类型，在使用ts时，interface这些也可以使用。

可以通过store实例来访问state，除了直接访问来修改state，还可以使用$patch方法来批量修改。

store.$patch({
	name: '',
	age: store.age + 1
})

使用$reset()方法可以让state重置为定义的初始状态。

可以在计算属性中使用mapState()辅助函数，来把store的state注册到this上，还可以为其增加函数来访问store。

订阅Stare除了watch之外还可以使用$subscribe方法。

在getters属性中定义箭头函数，第一个参数接受state。可以使用this来使用其它的getter。

可以为getter增加类型描述，使用ts或者jsdoc。

如果想要向getter传递参数，需要在定义getter时返回一个接受参数的函数。

getters: {
	getId: (state) => {
		return (id) => //...
	}
}

使用

setup() {
	const store = //...
	return { getId: store.getId }
}

访问其它sotre的getter直接在getters中通过实列使用即可。

action可以是异步的，不同于getter。

使用其它store中的action，直接在actions中调用即可。

可以通过$onAction()来侦听action，传递的参数中name为action的名称，store为实例，arges为传递给action的参数数组，after为action返回后的钩子，onError为action报错后的钩子。