千锋教育前端Vue3.0全套视频教程（Kerwin2023版，Vue.js零基础

Vuex 和 Pinia 都是用于状态管理的库，但它们在工作流上有一些不同之处。

Vuex 是 Vue.js 官方推荐的状态管理库，它提供了一种集中式存储管理应用程序中所有组件的状态的方式。Vuex 的工作流可以概括为以下几个步骤：

1. 创建“store”：使用 Vuex 提供的 createStore 方法创建一个全局的“store”对象。这里的“store”是一个包含应用程序状态的容器，所有组件都可以访问它。
2. 定义“state”：在“store”中定义应用程序的初始状态。这些状态通常是响应式的，即当状态发生变化时，订阅它的组件将自动更新。
3. 定义“mutations”：在“store”中定义用于修改状态的“mutations”。每个“mutation”函数都接收当前的状态对象作为第一个参数，并可以在函数中修改状态数据。
4. 定义“actions”：在“store”中定义用于处理异步操作的“actions”。每个“action”函数都可以触发一个或多个“mutation”，以实现状态的更新。
5. 在组件中使用状态：在组件中通过“store”对象的辅助函数（如 mapState、mapGetters 等）或者直接访问 $store 对象来使用状态。组件可以从“store”中读取状态数据，并在需要时通过“actions”来修改状态。

相比而言，Pinia 是一个由 Vue.js 生态系统的社区维护的新型状态管理库。它基于 Vue 3 的响应式系统，并且针对 TypeScript 提供了更好的类型推断支持。它的工作流类似于 Vuex，但存在一些不同的概念和实现细节：

1. 创建“store”：使用 Pinia 的 defineStore 方法创建一个“store”实例。每个“store”实例都是一个独立的状态组件，可以独立地创建和使用。
2. 定义状态和方法：在“store”实例中定义状态和方法。状态可以是响应式的数据属性，方法可以是用于修改状态的普通函数。
3. 在组件中使用状态：在组件中通过 useStore 函数获取“store”实例，然后可以直接访问“store”实例上的状态和方法。组件可以从“store”中读取状态数据，并直接调用方法来修改状态。
4. 使用插件：Pinia 允许使用插件来扩展其功能。插件可以用于在“store”创建之前或之后执行操作，例如添加额外的状态变量、操作拦截器等。