Pinia：Vue 的强大存储库

在 Vue 开发中，我们常常需要一个有效的状态管理工具来更好地组织和管理应用的状态。而 Pinia 就是这样一个出色的存储库。

Pinia和Vuex 关系

Pinia 与 Vue 经典的状态管理库 Vuex 有着一定的关联和区别。
Vuex 是 Vue 生态中曾经占据重要地位的状态管理解决方案，它具有一套成熟的架构和功能。
Pinia 可以看作是在 Vuex 的基础上进一步发展和优化而来。

Pinia 继承了 Vuex 集中管理状态、通过 actions 处理状态变更等核心概念，但在很多方面进行了改进。

当然Pinia官方 也提供了详细的教程示例
如果想全局使用的话，可以在main.ts下使用

import pinia from '/@/stores/index'
    app.use(pinia)

Pinia：

1. 语法更简洁直观，定义 Store 等操作相对简单。
2. 模块的拆分和组合更灵活。
3. 更好的类型推导和支持。
4. 不需要嵌套的mutations，直接通过 actions 管理状态变更。

Vuex：

1. 相对传统的架构，概念上可能稍显复杂。
2. 在大型项目中经过长期验证，具有较高的稳定性和成熟度。
3. 有明确的 mutations 概念来处理同步状态变更。

1、Pinia安装

它的安装十分便捷，使用 npm 或 yarn 可以轻松安装 Pinia：

npm install pinia

或

yarn add pinia

2、Pinia 实例

创建 Pinia 实例并将其提供给应用：

import { createPinia } from 'pinia';

const pinia = createPinia();

app.use(pinia);

3、定义 Store

接着可以定义 Store 来管理特定的状态：

import { defineStore } from 'pinia';

export const myStore = defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

4、 在组件中可以获取并使用 Store：

import { useMyStore } from './path/to/myStore';

setup() {
  const store = useMyStore();

  store.increment();
}

Pinia 具有简洁易用、轻量级、灵活的架构、良好的类型支持等优点，同时它也很好地融合了 Vue 的特性和风格。与 Vuex 相比，Pinia 在一些操作上更加简洁直接，更符合现代开发的需求。

无论是选择 Pinia 还是 Vuex，都取决于项目的具体需求和开发者的偏好。它们都为 Vue 应用的状态管理提供了有力的支持，帮助我们构建更复杂、更高效的应用。

希望这篇教程能让你对 Pinia 作为 Vue 的存储库有更清晰的认识和了解，让你的 Vue 开发之旅更加顺畅！