Vue 3 中推荐的状态管理方案除了 Vuex 还有哪些？例如 Pinia 或基于 Composition API 的简单状态管理。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊 Vue 3 状态管理的那些事儿。Vuex 固然是老牌劲旅，但现在江湖上可不止它一个门派了，各种新兴势力层出不穷。今天就带大家盘点一下 Vue 3 中除了 Vuex 之外，还有哪些值得关注的状态管理方案，以及它们各自的特点和适用场景。

开场白：Vuex 的“甜蜜的烦恼”

想当年，Vuex 几乎是 Vue 项目的标配，就像是奶茶店里的珍珠一样，默认加一份。但随着 Vue 3 和 Composition API 的到来，事情开始变得有趣起来。Vuex 虽然功能强大，但也有一些“甜蜜的烦恼”：

模板代码较多： 为了实现一个简单的状态，你可能需要定义 mutations, actions, getters 等等，代码量一下子就上去了。
学习曲线： 对于新手来说，理解 Vuex 的各种概念可能需要花费一些时间。
TypeScript 支持： 虽然 Vuex 4 对 TypeScript 的支持有所改善，但仍然存在一些类型推断上的问题。

于是，社区开始探索更加轻量级、更易于使用的状态管理方案。

一、Pinia：Vuex 的“亲儿子”

Pinia 可以说是 Vuex 的“亲儿子”，因为它是由 Vuex 核心团队成员开发的。Pinia 的设计目标就是解决 Vuex 的一些痛点，并且更好地与 Vue 3 和 Composition API 配合。

Pinia 的优势：

更简单的 API： Pinia 使用 defineStore 函数来定义状态，代码更加简洁易懂。
类型安全： Pinia 对 TypeScript 的支持非常好，可以提供更准确的类型提示。
模块化设计： Pinia 将状态分割成一个个的 store，易于组织和维护。
支持 Vue Devtools： Pinia 可以完美地与 Vue Devtools 集成，方便调试。
无需 mutations： Pinia 抛弃了 mutations 的概念，直接通过 actions 来修改状态，简化了代码流程。

Pinia 的基本用法：

安装 Pinia：
```
npm install pinia
```

创建 store：

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  },
})

使用 store：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double Count: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '../stores/counter'

const counter = useCounterStore()
</script>

Pinia 代码示例详解：

defineStore('counter', { ... }): 定义一个名为 "counter" 的 store。
state: () => ({ count: 0 }): 定义状态，state 是一个函数，返回一个包含状态对象的对象。
getters: { doubleCount: (state) => state.count * 2 }: 定义 getters，用于从 state 中派生出新的数据。
actions: { increment() { this.count++ } }: 定义 actions，用于修改 state。可以直接通过 this 访问和修改 state。

Pinia 适合的场景：

中小型项目，需要一个简单易用的状态管理方案。
对 TypeScript 支持有较高要求的项目。
希望避免 Vuex 的模板代码，提高开发效率的项目。

二、基于 Composition API 的简单状态管理

如果你的项目比较小，或者只需要管理一些简单的状态，那么完全可以基于 Composition API 自己实现一个简单的状态管理方案。

实现思路：

使用 ref 或 reactive 创建响应式状态。
使用 provide 和 inject 将状态共享给组件。
使用函数来修改状态。

代码示例：

// store.js
import { ref, reactive, readonly } from 'vue'

// 使用 ref 创建响应式状态
const count = ref(0)

// 使用 reactive 创建响应式对象
const user = reactive({
  name: '张三',
  age: 20,
})

// 修改状态的函数
function increment() {
  count.value++
}

function updateUser(newName, newAge) {
  user.name = newName
  user.age = newAge
}

// 导出状态和修改状态的函数
export function useStore() {
  return {
    count: readonly(count), // 使用 readonly 防止直接修改 count
    user: readonly(user),   // 使用 readonly 防止直接修改 user
    increment,
    updateUser
  }
}

// main.js (可选，如果需要全局共享)
import { createApp } from 'vue'
import App from './App.vue'
import { useStore } from './store'

const app = createApp(App);

// 创建一个全局属性 $store 方便在组件中使用
app.config.globalProperties.$store = useStore();
app.mount('#app');

// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>User Name: {{ user.name }}</p>
    <p>User Age: {{ user.age }}</p>
    <button @click="increment">Increment</button>
    <button @click="updateUser">Update User</button>
  </div>
</template>

<script setup>
import { useStore } from './store'
import { onMounted } from 'vue'

const { count, user, increment, updateUser } = useStore()

onMounted(() => {
  console.log("Initial count:", count.value);
});
function UpdateUser(){
    updateUser("李四",25);
}
</script>

代码示例详解：

ref(0): 创建一个响应式的 number 类型变量 count，初始值为 0。 ref 创建的值需要通过 .value 访问和修改。
reactive({ name: '张三', age: 20 }): 创建一个响应式的对象 user。 reactive 创建的值可以直接访问和修改属性。
readonly(count) 和 readonly(user): 将 count 和 user 设置为只读，防止组件直接修改状态，只能通过 increment 和 updateUser 函数来修改。
useStore(): 一个组合函数，返回状态和修改状态的函数。
在组件中使用 useStore() 来获取状态和修改状态的函数。

优点：

简单： 代码量少，易于理解。
灵活： 可以根据项目的需要自定义状态管理方案。
与 Composition API 完美集成。

缺点：

需要自己处理状态的共享和更新。
可能需要自己实现一些额外的功能，例如状态持久化。
如果项目变得复杂，可能需要重构为更完善的状态管理方案。

适合的场景：

小型项目，只需要管理一些简单的状态。
对状态管理方案的灵活性有较高要求的项目。
希望深入理解 Vue 3 Composition API 的项目。
不需要复杂的状态管理功能，例如 undo/redo, 时间旅行等。

三、其他状态管理方案

除了 Pinia 和基于 Composition API 的简单状态管理，还有一些其他的状态管理方案也值得关注：

XState： 基于状态机的状态管理方案，适合管理复杂的状态逻辑。
Effector： 基于事件驱动的状态管理方案，适合管理异步操作和副作用。
VueUse： 一个包含各种实用 Composition API 的库，其中也包含一些状态管理相关的工具函数。

方案	特点	适用场景
Pinia	简单易用，类型安全，模块化设计，支持 Vue Devtools，无需 mutations	中小型项目，对 TypeScript 支持有较高要求的项目，希望避免 Vuex 的模板代码
Composition API	灵活，可以自定义状态管理方案，与 Composition API 完美集成	小型项目，对状态管理方案的灵活性有较高要求的项目，希望深入理解 Vue 3 Composition API 的项目
XState	基于状态机的状态管理方案，可以清晰地定义状态和状态之间的转换	需要管理复杂的状态逻辑的项目，例如表单验证、流程控制
Effector	基于事件驱动的状态管理方案，可以更好地管理异步操作和副作用	需要管理大量的异步操作和副作用的项目，例如数据请求、事件处理
VueUse (useStorage)	提供各种实用 Composition API，例如 `useStorage` 可以方便地实现状态持久化	需要一些简单的状态管理功能，例如状态持久化

四、状态管理方案的选择

选择哪种状态管理方案，需要根据项目的具体情况来决定。

项目规模： 小型项目可以选择基于 Composition API 的简单状态管理方案，中大型项目可以选择 Pinia 或 Vuex。
复杂程度： 如果需要管理复杂的状态逻辑，可以选择 XState 或 Effector。
TypeScript 支持： 如果对 TypeScript 支持有较高要求，可以选择 Pinia。
团队经验： 选择团队成员熟悉的状态管理方案，可以提高开发效率。
学习成本： 考虑学习成本，选择易于学习和使用的状态管理方案。

总结：

Vue 3 状态管理的世界充满了各种可能性，Vuex 仍然是一个可靠的选择，但 Pinia 和基于 Composition API 的简单状态管理方案也各有优势。希望今天的分享能够帮助大家更好地选择适合自己的状态管理方案，写出更加优雅和高效的 Vue 3 代码。记住，没有最好的方案，只有最适合你的方案！

互动环节：

大家在实际项目中都使用过哪些状态管理方案？有什么经验或者心得可以分享一下吗？欢迎在评论区留言讨论！

感谢大家的聆听，下次再见！

发表回复 取消回复

发表回复取消回复