各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们聊点刺激的，把 Vuex 这位老伙计换成 Pinia，看看它到底有什么能耐。
先别急着说 Vuex 哪里不好，它也为咱们 Vue 项目操碎了心。但时代在进步，技术在革新，Pinia 就像一位年轻力壮的小伙子，在某些方面确实更胜一筹。
咱们今天的议程如下：
- Pinia 闪亮登场：它到底是个什么玩意？
- 告别 Vuex，迎接 Pinia：安装与配置
- Pinia 的核心概念：State、Getters、Actions
- 模块化管理：Pinia 如何让你的代码更清爽？
- TypeScript 好基友：Pinia 对 TS 的完美支持
- SSR 也能轻松驾驭：Pinia 在服务端渲染中的优势
- 实战演练：一个小案例让你彻底明白 Pinia
- Pinia vs Vuex：深度对比，优劣分析
- 踩坑指南：使用 Pinia 可能遇到的问题及解决方案
- 总结与展望：Pinia 的未来之路
准备好了吗？系好安全带，发车喽！
1. Pinia 闪亮登场：它到底是个什么玩意？
Pinia，发音类似 "pee-nee-yah"，是一种 Vue 的状态管理库，它被设计成 Vuex 5 的替代品。但它不仅仅是 Vuex 的升级版，而是一个全新的、更轻量级的、更符合 Vue 3 设计理念的状态管理方案。
简单来说，Pinia 就是一个让你在 Vue 组件之间共享数据和管理状态的工具。它就像一个全局的“数据中心”，任何组件都可以从这里获取数据，或者修改数据。
Pinia 的核心特点：
- 更轻量级： Pinia 的体积比 Vuex 更小，打包后的文件更小，加载速度更快。
- 更简单易用： Pinia 的 API 设计更加简洁直观，学习成本更低。
- 更好的 TypeScript 支持： Pinia 从一开始就考虑了 TypeScript 的支持，类型推断非常强大。
- 模块化设计： Pinia 的 store 可以按模块划分，方便代码组织和维护。
- Composition API 友好： Pinia 与 Vue 3 的 Composition API 配合使用更加自然流畅。
- 无需 Mutations： Pinia 抛弃了 Vuex 中繁琐的 Mutations，直接使用 Actions 修改状态，更加简洁高效。
- 支持 Vue Devtools： Pinia 完美支持 Vue Devtools，方便调试和查看状态。
2. 告别 Vuex，迎接 Pinia：安装与配置
想要体验 Pinia 的魅力，首先得把它请到你的项目里来。安装过程非常简单：
npm install pinia
# 或者
yarn add pinia
# 或者
pnpm add pinia安装完成后，需要在 Vue 应用中注册 Pinia：
// main.js (或者你的入口文件)
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')这段代码做了什么？
- 导入了
createPinia函数，用于创建 Pinia 实例。 - 创建了一个 Pinia 实例
pinia。 - 使用
app.use(pinia)将 Pinia 注册到 Vue 应用中。
这样，你的 Vue 组件就可以使用 Pinia 提供的功能了。
3. Pinia 的核心概念：State、Getters、Actions
Pinia 的核心概念与 Vuex 类似，但更加简洁明了：
- State： 存储应用的状态数据，类似于 Vue 组件的
data。 - Getters： 从 State 中派生出的计算属性，类似于 Vue 组件的
computed。 - Actions： 用于修改 State 的方法，类似于 Vue 组件的
methods。
定义一个 Store：
在 Pinia 中，我们使用 defineStore 函数来定义一个 Store。defineStore 接受两个参数：
- id： Store 的唯一标识符，用于在应用中引用 Store。
- options： 一个配置对象，包含
state、getters和actions。
// store/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: 'Pinia',
}),
getters: {
doubleCount: (state) => state.count * 2,
greeting: (state) => `Hello, ${state.name}!`,
},
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
reset() {
this.count = 0
},
incrementBy(amount) {
this.count += amount
},
},
})这个例子定义了一个名为 counter 的 Store，它包含：
- state：
count(初始值为 0) 和name(初始值为 ‘Pinia’)。 - getters：
doubleCount(返回count的两倍) 和greeting(返回一个问候语)。 - actions：
increment(增加count的值)、decrement(减少count的值)、reset(重置count为 0) 和incrementBy(增加count的指定值)。
在组件中使用 Store：
要在组件中使用 Store，首先需要导入并调用 useCounterStore 函数：
// Counter.vue
<template>
<div>
<p>Count: {{ counter.count }}</p>
<p>Double Count: {{ counter.doubleCount }}</p>
<p>{{ counter.greeting }}</p>
<button @click="counter.increment()">Increment</button>
<button @click="counter.decrement()">Decrement</button>
<button @click="counter.reset()">Reset</button>
<button @click="counter.incrementBy(5)">Increment by 5</button>
</div>
</template>
<script>
import { useCounterStore } from '@/store/counter'
export default {
setup() {
const counter = useCounterStore()
return { counter }
},
}
</script>这段代码做了什么？
- 导入了
useCounterStore函数。 - 在
setup函数中调用useCounterStore，获取 Store 实例counter。 - 在模板中使用
counter.count、counter.doubleCount和counter.greeting来显示状态和计算属性。 - 使用
counter.increment()、counter.decrement()、counter.reset()和counter.incrementBy()来调用 actions，修改状态。
是不是感觉很简单？
4. 模块化管理：Pinia 如何让你的代码更清爽？
当你的项目越来越大，所有的状态都放在一个 Store 里会变得难以维护。Pinia 允许你将 Store 分成多个模块，每个模块负责管理一部分状态。
创建多个 Store：
你可以创建多个 Store，每个 Store 负责管理不同的状态：
// store/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
name: 'John Doe',
age: 30,
}),
getters: {
profile: (state) => `${state.name} is ${state.age} years old.`,
},
actions: {
updateName(name) {
this.name = name
},
updateAge(age) {
this.age = age
},
},
})// store/settings.js
import { defineStore } from 'pinia'
export const useSettingsStore = defineStore('settings', {
state: () => ({
theme: 'light',
language: 'en',
}),
actions: {
toggleTheme() {
this.theme = this.theme === 'light' ? 'dark' : 'light'
},
setLanguage(language) {
this.language = language
},
},
})这个例子创建了两个 Store：user 和 settings。user Store 负责管理用户的信息，settings Store 负责管理应用的设置。
在组件中使用多个 Store：
在组件中，你可以同时使用多个 Store：
// Profile.vue
<template>
<div>
<p>{{ user.profile }}</p>
<p>Theme: {{ settings.theme }}</p>
<button @click="settings.toggleTheme()">Toggle Theme</button>
</div>
</template>
<script>
import { useUserStore } from '@/store/user'
import { useSettingsStore } from '@/store/settings'
export default {
setup() {
const user = useUserStore()
const settings = useSettingsStore()
return { user, settings }
},
}
</script>这样，你的代码就变得更加模块化，易于维护和扩展。
5. TypeScript 好基友：Pinia 对 TS 的完美支持
Pinia 从一开始就考虑了 TypeScript 的支持，它提供了强大的类型推断和类型检查，可以帮助你编写更健壮的代码。
使用 TypeScript 定义 Store：
// store/todo.ts
import { defineStore } from 'pinia'
interface Todo {
id: number
text: string
completed: boolean
}
interface TodoState {
todos: Todo[]
}
export const useTodoStore = defineStore('todo', {
state: (): TodoState => ({
todos: [],
}),
getters: {
completedTodos: (state): Todo[] => state.todos.filter((todo) => todo.completed),
pendingTodos: (state): Todo[] => state.todos.filter((todo) => !todo.completed),
},
actions: {
addTodo(text: string) {
const newTodo: Todo = {
id: Date.now(),
text,
completed: false,
}
this.todos.push(newTodo)
},
toggleTodo(id: number) {
const todo = this.todos.find((todo) => todo.id === id)
if (todo) {
todo.completed = !todo.completed
}
},
},
})这个例子使用 TypeScript 定义了一个 Todo 接口和一个 TodoState 接口，用于描述 todos 的结构。Pinia 会自动推断出 state、getters 和 actions 的类型，并在编译时进行类型检查。
在组件中使用 TypeScript：
// TodoList.vue
<template>
<ul>
<li v-for="todo in todoStore.todos" :key="todo.id">
<input type="checkbox" :checked="todo.completed" @change="todoStore.toggleTodo(todo.id)">
<span>{{ todo.text }}</span>
</li>
</ul>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useTodoStore } from '@/store/todo'
export default defineComponent({
setup() {
const todoStore = useTodoStore()
return { todoStore }
},
})
</script>在组件中使用 TypeScript，可以获得更好的类型安全和代码提示。
6. SSR 也能轻松驾驭：Pinia 在服务端渲染中的优势
Pinia 在服务端渲染 (SSR) 方面也表现出色。由于 Pinia 的设计更加简洁，它更容易在服务端进行初始化和序列化。
SSR 中的 Pinia：
// server.js (简化版)
import { createSSRApp } from 'vue'
import { createPinia } from 'pinia'
import { renderToString } from '@vue/server-renderer'
import App from './App.vue'
export async function render() {
const pinia = createPinia()
const app = createSSRApp(App)
app.use(pinia)
const appHtml = await renderToString(app)
// 获取初始状态
const piniaState = pinia.state.value
// 将初始状态注入到 HTML 中
const html = `
<!DOCTYPE html>
<html>
<head>
<title>SSR with Pinia</title>
<script>window.__PINIA_STATE__ = ${JSON.stringify(piniaState)}</script>
</head>
<body>
<div id="app">${appHtml}</div>
<script src="/js/app.js"></script>
</body>
</html>
`
return html
}这段代码做了什么？
- 创建了一个 Pinia 实例
pinia。 - 将
pinia注册到 Vue 应用中。 - 使用
renderToString将 Vue 应用渲染成 HTML 字符串。 - 使用
pinia.state.value获取 Pinia 的初始状态。 - 将初始状态序列化成 JSON 字符串，并注入到 HTML 中。
客户端激活：
在客户端，需要在应用启动时，从 window.__PINIA_STATE__ 中获取初始状态，并将其设置到 Pinia 实例中：
// app.js (简化版)
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia()
// 从 window.__PINIA_STATE__ 中获取初始状态
if (window.__PINIA_STATE__) {
pinia.state.value = window.__PINIA_STATE__
}
const app = createApp(App)
app.use(pinia)
app.mount('#app')这样，客户端就可以使用服务端渲染的初始状态，避免了闪烁和 SEO 问题。
7. 实战演练：一个小案例让你彻底明白 Pinia
咱们来做一个简单的计数器应用，让你彻底明白 Pinia 的用法。
1. 创建 Store：
// store/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++
},
decrement() {
this.count--
},
},
})2. 创建组件：
// Counter.vue
<template>
<div>
<h1>Counter: {{ counter.count }}</h1>
<button @click="counter.increment()">Increment</button>
<button @click="counter.decrement()">Decrement</button>
</div>
</template>
<script>
import { useCounterStore } from '@/store/counter'
export default {
setup() {
const counter = useCounterStore()
return { counter }
},
}
</script>3. 在 App.vue 中使用组件：
// App.vue
<template>
<Counter />
</template>
<script>
import Counter from './components/Counter.vue'
export default {
components: {
Counter,
},
}
</script>运行你的应用，你就能看到一个简单的计数器，点击按钮可以增加或减少计数器的值。
8. Pinia vs Vuex：深度对比，优劣分析
| 特性 | Pinia | Vuex |
|---|---|---|
| 体积 | 更小 | 更大 |
| API | 更简洁，更直观 | 相对复杂，需要 mutations |
| TypeScript | 完美支持，类型推断强大 | 需要额外配置，类型支持相对较弱 |
| Composition API | 完美配合 | 需要额外处理 |
| Mutations | 没有 Mutations，直接修改 State | 需要通过 Mutations 修改 State |
| 模块化 | 更灵活，每个 Store 都是一个模块 | 需要使用 modules 选项 |
| SSR | 更容易在服务端进行初始化和序列化 | 需要额外处理 |
| Devtools | 完美支持 Vue Devtools | 完美支持 Vue Devtools |
| 学习曲线 | 更低 | 相对较高 |
总结：
- Pinia 的优势： 更轻量级、更简单易用、更好的 TypeScript 支持、模块化设计更灵活、与 Composition API 配合更流畅、SSR 更容易。
- Vuex 的优势： 社区成熟，生态完善，有大量的插件和工具。
选择建议：
- 如果你是新项目，或者正在使用 Vue 3 和 Composition API，那么 Pinia 是一个更好的选择。
- 如果你的项目已经使用了 Vuex，并且运行良好，那么没有必要强制迁移到 Pinia。
9. 踩坑指南：使用 Pinia 可能遇到的问题及解决方案
- 类型错误： 如果你在使用 TypeScript，一定要确保你的 Store 定义和组件使用都符合类型要求。
- 状态丢失： 在 SSR 中，一定要正确地将初始状态注入到 HTML 中，并在客户端进行激活。
- 性能问题： 如果你的 Store 中存储了大量数据，可能会影响性能。可以使用
computed来缓存计算结果，或者使用watch来监听状态的变化。 - 命名冲突： 如果你的 Store 的
id与其他 Store 的id冲突，会导致应用崩溃。一定要确保每个 Store 的id都是唯一的。 - 过度使用： 不要把所有的数据都放在 Store 中，只应该存储需要在多个组件之间共享的数据。
10. 总结与展望：Pinia 的未来之路
Pinia 作为 Vue 的新一代状态管理库，凭借其简洁的设计、强大的 TypeScript 支持和良好的 SSR 表现，赢得了越来越多开发者的喜爱。
未来，Pinia 可能会继续优化性能，提供更多的插件和工具，进一步完善生态系统。
最后，我想说的是，技术没有绝对的好坏，只有适合不适合。选择 Pinia 还是 Vuex，取决于你的项目需求和个人偏好。
今天的分享就到这里，感谢大家的聆听！希望你们有所收获，也欢迎大家在评论区交流讨论。下次再见！