🍍新手入门Pinia状态管理库，看完这篇文章就够了

什么是Pinia？

• Pinia本质上依然是一个状态管理的库，它允许你跨组件/页面进行状态共享。

Pinia和Vuex的区别？

• 与Vuex相比，Pinia提供了一个更简单的API，具有更少的规范，提供了Composition-API风格的API。
• 最重要的是，在与TypeScript一起使用时具有可靠的类型推断支持。

和Vuex相比，Pinia有什么优势？

• mutations不再存在，只有state，gettes，actions。
• 更友好的TypeScript支持。
• 不再有modules的嵌套结构，每个store都是独立的，互不影响。
• 没有命名空间模块。
• 无需动态添加 Store，默认情况下它们都是动态的。
• 不再需要注入、导入函数、调用函数。
• 支持插件来扩展自身功能。
• 支持服务端渲染（SSR）。

上面列出的只是Pinia的一些主要的优点，还有其它的优点，需要大家在使用的时候慢慢去体会，下面一起来看看Pinia是如何使用的。

如何使用Pinia？

安装Pinia

yarn add pinia
或者
npm install pinia

创建Pinia

挂载Pinia

定义一个Store

• 我们需要知道 Store 是使用 defineStore() 定义的。
• 并且它需要一个唯一名称，作为第一个参数传递。
• 这个name，也称为id，是必需的，Pinia使用它来将store连接到devtools。
• 返回的函数统一使用useXXX作为命名方案，这是约定的一种规范。

使用Store

• store在它被使用之前是不会被创建的，我们可以通过use函数来使用store。

解构Store

注意：

• 使用传统的方式将属性从store中解构出来，虽然可以获取到值，但是不具有响应式。

• 为了从store中解构属性的时候保持其响应式，我们可以使用pinia提供的storeToRefs函数。

• 或者使用vue提供的toRefs函数。

Pinia中操作state

• 默认情况下，可以通过store.属性名来修改state。
• 可以通过调用store上的$reset()方法将state重置到其初始值。
• 如果想要一次修改多个state，可以调用store上的$patch方法。

Pinia中的getters

定义和访问getter

• getters相当于store的计算属性。
• getters中可以接收一个state作为参数的函数。

• 在一个getters方法中也可以调用其它的getters方法。下图中，我们定义了一个 doubleCountAddOne 的getter方法，在该方法中，我们通过this去调用了另一个getter方法 doubleCount，这里的this指向的是store实例。

• getters也支持返回一个函数，这样就可以接收参数。

• getters也可以访问其它store中的getters。

Pinia中的actions

• actions相当于组件中的methods。
• 和getters一样，在action中可以通过this访问整个store实例的所有操作。
• 并且actions中是支持异步操作的，我们可以在actions中编写异步函数，在函数中使用await。

总结

总的来说，Pinia的语法更加的简洁，极易上手，学起来吧！