Vuex 与 Pinia，前端状态管理的双雄对决

terry 6小时前阅读数 12 #Vue

文章标签 Vuex Pinia

在 Vue 生态系统中，状态管理一直是一个关键议题，随着项目规模的扩大，组件之间的状态共享和管理变得愈发复杂，Vuex 和 Pinia 作为两款主流的状态管理工具，各自有着独特的优势和适用场景，本文将以问答的形式，深入探讨它们的区别、特点以及如何选择。

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

举个例子，在一个电商应用中，购物车的商品列表、用户的登录状态等都可以通过 Vuex 进行统一管理，当用户添加商品到购物车时，Vuex 会更新购物车的状态,并且所有依赖该状态的组件都会自动更新。

Pinia 又是什么？

Pinia 是 Vue 的存储库，它允许你跨组件/页面共享状态，它是 Vuex 的升级版，具有更简洁的 API、更好的 TypeScript 支持以及更小的体积。

在一个博客应用中，文章的列表、用户的收藏等状态可以使用 Pinia 进行管理，Pinia 的语法更加简洁,开发体验更好。

Vuex 和 Pinia 的主要区别

（一）API 设计

Vuex：Vuex 的 API 相对复杂，需要定义 mutations、actions、getters 等，在 Vuex 中，修改状态必须通过 mutations，这是一种强制的规则,保证了状态变化的可追踪性。
Pinia：Pinia 的 API 更加简洁，它只有 state、getters 和 actions，Pinia 中的 actions 可以直接修改 state，不需要像 Vuex 那样通过 mutations。

（二）TypeScript 支持

Vuex：Vuex 对 TypeScript 的支持相对较弱,需要额外的配置和插件。
Pinia：Pinia 天生支持 TypeScript,提供了更好的类型推断和自动补全功能。

（三）插件系统

Vuex：Vuex 的插件系统功能强大，可以实现日志记录、持久化等功能。
Pinia：Pinia 的插件系统相对简单,但也能满足基本的需求。

（四）体积大小

Vuex：Vuex 的体积相对较大,因为它包含了更多的功能和特性。
Pinia：Pinia 的体积更小，只有约 1KB,这使得它在性能上更有优势。

如何选择 Vuex 或 Pinia？

（一）项目规模

小型项目：如果项目规模较小，状态管理相对简单，Pinia 是一个更好的选择，它的简洁 API 和小体积可以提高开发效率。
大型项目：对于大型项目，Vuex 的严格规则和强大插件系统可以更好地管理复杂的状态。

（二）团队技术栈

TypeScript 项目：如果项目使用 TypeScript，Pinia 的良好支持可以提供更好的开发体验。
传统 JavaScript 项目：Vuex 仍然是一个可靠的选择，尤其是对于已经熟悉 Vuex 模式的团队。

（三）功能需求

复杂状态管理：如果项目需要复杂的状态管理，如异步操作、状态缓存等，Vuex 的 mutations 和 actions 可以更好地组织代码。
简单状态共享：对于简单的状态共享需求，Pinia 的简洁 API 可以更快地实现功能。

实战案例

（一）Vuex 案例

假设我们有一个待办事项应用，使用 Vuex 管理待办事项的状态。

定义 state：
```
state: {
todos: []
}
```

定义 mutations：

mutations: {
addTodo(state, todo) {
 state.todos.push(todo);
}
}

定义 actions：

actions: {
async fetchTodos({ commit }) {
 const response = await fetch('https://api.example.com/todos');
 const todos = await response.json();
 commit('setTodos', todos);
}
}

在组件中使用：

<template>
<div>
 <input v-model="newTodo" />
 <button @click="addTodo">Add Todo</button>
 <ul>
   <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
 </ul>
</div>
</template>

```

（二）Pinia 案例

同样是待办事项应用，使用 Pinia 管理状态。

定义 store：
```
import { defineStore } from 'pinia';
```

export const useTodoStore = defineStore('todo', { state: () => ({ todos: [] }), actions: { addTodo(todo) { this.todos.push(todo); }, async fetchTodos() { const response = await fetch('https://api.example.com/todos'); this.todos = await response.json(); } } });

**在组件中使用**：
```html
<template>
  <div>
    <input v-model="newTodo" />
    <button @click="addTodo">Add Todo</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>
<script>
import { useTodoStore } from '../stores/todo';
export default {
  setup() {
    const todoStore = useTodoStore();
    const newTodo = ref('');
    const addTodo = () => {
      todoStore.addTodo({ text: newTodo.value });
      newTodo.value = '';
    };
    return {
      todos: computed(() => todoStore.todos),
      newTodo,
      addTodo
    };
  }
};
</script>

通过以上案例可以看出，Pinia 的代码更加简洁，开发体验更好，而 Vuex 的代码结构更加清晰,适合大型项目。

Vuex 和 Pinia 都是优秀的状态管理工具，它们各有优劣，在选择时，需要根据项目的规模、团队的技术栈以及功能需求来综合考虑，对于小型项目和 TypeScript 项目，Pinia 是一个更好的选择；对于大型项目和复杂状态管理需求，Vuex 仍然是一个可靠的选择，随着 Vue 生态的不断发展，相信 Pinia 会越来越受到开发者的青睐，但 Vuex 也不会被淘汰,它将继续在大型项目中发挥重要作用。

希望本文能够帮助你更好地理解 Vuex 和 Pinia 的区别和特点,在实际项目中做出更合适的选择。