用 Pinia 点燃 Vue 3 应用：状态管理革新之旅

用 Pinia 点燃 Vue 3 应用：状态管理革新之旅
- 什么是 Pinia？
- 安装与基础配置
- 创建和使用 Store
- - 定义 Store
  - 在组件中使用 Store
- 高级用法
- - 组合多个 Store
  - 持久化状态
- 总结

用 Pinia 点燃 Vue 3 应用：状态管理革新之旅

在构建现代前端应用时，如何高效管理状态一直是开发者关注的焦点。随着 Vue 3 的普及，官方推荐的状态管理方案 Pinia 因其轻量、灵活和易于调试而迅速成为主流选择。本文将带你深入了解 Pinia，从安装到在项目中高效使用它，并附带实用的代码示例，帮助你轻松驾驭状态管理。

什么是 Pinia？

Pinia 是 Vue 生态系统中的状态管理库，作为 Vuex 的替代方案，它具有更简单的 API 和更直观的使用方式。借助 Pinia，你可以：

轻松定义 store： 使用 defineStore 函数快速创建状态容器；
响应式状态管理： 完美兼容 Vue 3 的 Composition API，状态更新将自动驱动视图刷新；
优秀的开发体验： 内置调试工具支持热更新、时间旅行调试等。

安装与基础配置

首先，通过 npm 或 yarn 安装 Pinia：

# 使用 npm
npm install pinia# 或者使用 yarn
yarn add pinia

接下来，在你的 Vue 3 项目中引入 Pinia，并将其作为插件挂载到 Vue 应用上：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia()app.use(pinia)
app.mount('#app')

创建和使用 Store

使用 Pinia 最核心的 API 是 defineStore。下面是一个简单的示例，我们将创建一个管理计数器状态的 store。

定义 Store

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {// state: 返回一个对象作为响应式状态state: () => ({count: 0}),// getters: 类似计算属性，用于派生状态getters: {doubleCount(state) {return state.count * 2}},// actions: 定义更改状态的方法actions: {increment() {this.count++},decrement() {this.count--}}
})

在组件中使用 Store

在 Vue 组件中，你可以通过导入 store 并调用其方法来操作状态：

<!-- components/Counter.vue -->
<template><div><h2>计数器示例</h2><p>当前计数: {{ counter.count }}</p><p>双倍计数: {{ counter.doubleCount }}</p><button @click="counter.increment">增加</button><button @click="counter.decrement">减少</button></div>
</template><script setup>
import { useCounterStore } from '../stores/counter'// 初始化 store
const counter = useCounterStore()
</script><style scoped>
button {margin-right: 8px;
}
</style>

通过以上代码，我们实现了一个简单的计数器。点击按钮时，调用 store 中定义的 action 来修改状态，同时组件内绑定的响应式数据也会自动更新视图。

高级用法

组合多个 Store

在大型应用中，你可能需要管理多个业务模块的状态。Pinia 支持你根据业务逻辑拆分 store，并在组件中同时使用多个 store：

// stores/user.js
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {state: () => ({name: '',loggedIn: false}),actions: {login(name) {this.name = namethis.loggedIn = true},logout() {this.name = ''this.loggedIn = false}}
})

然后在组件中同时引入计数器和用户状态：

<!-- components/Dashboard.vue -->
<template><div><h2>仪表盘</h2><div v-if="user.loggedIn"><p>欢迎, {{ user.name }}！</p><button @click="user.logout">退出</button></div><div v-else><button @click="user.login('张三')">登录</button></div><Counter /></div>
</template><script setup>
import Counter from './Counter.vue'
import { useUserStore } from '../stores/user'const user = useUserStore()
</script>

持久化状态

借助插件，你还可以将 store 状态持久化到 localStorage 中，使得刷新页面时状态不会丢失。例如，使用 pinia-plugin-persistedstate 插件：

npm install pinia-plugin-persistedstate

配置插件：

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persistedstate'
import App from './App.vue'const app = createApp(App)
const pinia = createPinia()pinia.use(piniaPersist)app.use(pinia)
app.mount('#app')

在 store 中开启持久化功能：

// stores/counter.js
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({count: 0}),actions: {increment() {this.count++}},// 启用持久化persist: true
})