2. Pinia：Pinia基础知识入门

什么是状态管理库？

在现代前端开发中，状态管理库是一个至关重要的概念。它主要用于集中管理应用中的状态（数据），尤其是在多个组件之间共享的状态。状态管理库提供了一种机制，使得状态的变更可以预测和追踪，从而使得应用的数据流更加清晰和可维护

Pinia 的基本原理

Pinia 是 Vue.js 的状态管理库，它的设计哲学是提供一个更简洁直接的 API，同时提供强大的 TypeScript 支持和 DevTools 集成。Pinia 的核心原理是使用 Vue 3 的 reactive 函数来创建响应式的状态存储。当状态发生变化时，Pinia 会自动更新依赖于该状态的组件。此外，Pinia 使用 Proxy 对象来监听数据的变化，并触发相应的更新操作

如何在 Vue 应用中使用 Pinia

在 Vue 应用中使用 Pinia 相对简单。首先，需要安装 Pinia 并创建一个 store。然后，在 Vue 应用的主文件中引入并使用 Pinia。在组件中，可以通过 Pinia 的 useStore 钩子来访问和修改状态。以下是一个基本的使用示例

// main.js
import { createApp } from 'vue'; // 从 'vue' 导入 createApp 函数
import App from './App.vue'; // 导入 Vue 应用的根组件
import { createPinia } from 'pinia'; // 从 'pinia' 导入 createPinia 函数

const app = createApp(App); // 创建 Vue 应用实例
const pinia = createPinia(); // 创建 Pinia 实例

app.use(pinia); // 将 Pinia 插件应用到 Vue 应用中
app.mount('#app'); // 将 Vue 应用挂载到 DOM 元素上

// store.js
import { defineStore } from 'pinia'; // 从 'pinia' 导入 defineStore 函数

// 使用 defineStore 定义一个新的 store
export const useMainStore = defineStore('main', {
  // 定义 store 的状态
  state: () => ({
    count: 0, // 定义一个名为 count 的状态变量，并初始化为 0
  }),
  // 定义 store 的行为（actions）
  actions: {
    increment() {
      this.count++; // 定义一个名为 increment 的方法，用于将 count 增加 1
    },
    decrement() {
      this.count--; // 定义一个名为 decrement 的方法，用于将 count 减少 1
    },
  },
});

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p> <!-- 显示 count 状态 -->
    <button @click="increment">Increment</button> <!-- 点击按钮时调用 increment 方法 -->
    <button @click="decrement">Decrement</button> <!-- 点击按钮时调用 decrement 方法 -->
  </div>
</template>

<script>
import { defineComponent } from 'vue'; // 从 'vue' 导入 defineComponent 函数
import { useMainStore } from './store'; // 从 './store' 导入 useMainStore 函数

// 使用 defineComponent 定义一个新的 Vue 组件
export default defineComponent({
  setup() {
    const store = useMainStore(); // 使用 useMainStore 钩子获取 store 实例
    return { ...store }; // 将 store 的状态和方法暴露给模板
  },
});
</script>

在这个例子里，我们创建了一个简单的计数器应用。我们定义了一个名为 main 的 Pinia store，它包含一个名为 count 的状态变量和两个方法 increment 和 decrement 来改变 count 的值。在 Vue 组件 MyComponent.vue 中，我们使用了 useMainStore 钩子来访问 store，并在模板中展示了 count 的值和两个按钮来调用 increment 和 decrement 方法。