Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。在Vue3中，我们推荐使用Pinia替代vuex。Pinia相比于vuex，他的使用更加简洁方便。最显而易见的是Pinia中移除了mutation，而在vuex中mutation仅仅是为了方便vue-devtool追踪store变化。我们从以下几个点快速介绍Pinia的使用：
store创建
store的创建通过Pinia的defineStore方法来完成，它传递两个参数：第一个参数是唯一的id，第二个参数为Setup 函数或 Options 对象。本文使用的都是Options对象。Pinia中只有state、getters、actions，移除了vuex中mutation。
store的使用和state的更新方式
store的使用
在Pinia中store的使用不再像vuex一样需要记忆冗长的命名以及store的命名空间，在vuex中通常是这样：this.$store.state.namespace.stateName,而在Pinia中你只需要在你想使用它的时候引入即可，并且得益于typescript的支持，它编辑器中提供了丰富的提示，可以避免很多麻烦。如下：
我们导入了
useCounterStore，并在setup函数中使用，此时我们可以通过counter获取到该store的所有内容。并且在template中，我们使用counter.的时候获得了大量的提示信息
store的更新方式
store有三种更新方式
- 直接修改counter对应的state：
counter.count++ - 使用$patch,通过传入对象修改指定的state
- 使用对应的actions中的方法进行修改
值得注意的是$pacth方法有多种使用方式，它可以修改多个属性，同时也可以传入一个函数来做一些更复杂的修改
上图修改了多个属性值
上图传入了函数，我们可以在函数中更直观的作更多的操作
store中的计算属性getter
getter其实就是一个返回计算结果的函数，和vue中的computed一样，在使用时我们可以直接counter.getterName即可，如：counter.doubleCount,它和计算属性一样可以缓存计算结果，然而需要注意的是，当你在getter中返回一个函数时，它将不在缓存计算结果，因为此时你只是在调用函数，如下：
我们通过返回函数来达到自定义参数（userId）的目的，组件中使用：
组件间如何共享store
组件间共享store其实只需要导入相同的store并且useStore()就可以获取到统一的结果，十分的方便。
store的相互引用
我们在一个store中可以引用另外一个store的值，如下：
我们在counter中引入了otherStore，并在getter中使用了它，可以看到在一个store中使用另一个store与在组件中使用并无差异，值得注意的是defineStore的第一个参数必须唯一，当你两个id都为counter时，将会出现取值错误的问题。
错误情况：
- id都为counter，state属性都为count，other.count会取到CounterStore的值
- id都为counter，state属性不同，CounterStore属性为count，OtherStore属性为count2，other.count2 取不到对应的值
只有在id不同时，state属性名不管相同与否才可以取到正确的state值，可见Pinia根据id区分store。以上就是Pinia基础使用方式。
