引言
随着 Vue 3 的推出，Pinia 成为了 Vue 社区中一个备受瞩目的状态管理库。它简洁而强大，旨在替代 Vuex，为开发者提供更加灵活的状态管理解决方案。本文将详细介绍 Pinia 的核心概念、安装方法、使用技巧以及如何在 Vue 3 项目中集成 Pinia。
1. Pinia 简介
Pinia 是一个轻量级的状态管理库，专为 Vue 3 设计。它的设计理念是简单、直观，易于学习和使用。Pinia 支持组合式 API 和选项式 API，使得状态管理更加灵活。
2. 安装 Pinia
安装 Pinia 非常简单，可以通过 npm 或 yarn 完成。
Bash
1npm install pinia --save
2# 或者
3yarn add pinia3. 创建 Store
在 Pinia 中，状态管理的核心是 Store。Store 可以理解为一个包含状态、getters 和 actions 的对象。
Javascript
1// stores/user.js
2import { defineStore } from 'pinia'
3
4export const useUserStore = defineStore('user', {
5 state: () => {
6 return {
7 isLoggedIn: false,
8 user: null
9 }
10 },
11 actions: {
12 login(user) {
13 this.isLoggedIn = true
14 this.user = user
15 },
16 logout() {
17 this.isLoggedIn = false
18 this.user = null
19 }
20 },
21 getters: {
22 isUserLoggedIn: (state) => state.isLoggedIn,
23 currentUser: (state) => state.user
24 }
25})4. 注册 Store
在主应用文件中注册 Pinia 和 Store。
Javascript
1// main.js
2import { createApp } from 'vue'
3import { createPinia } from 'pinia'
4import App from './App.vue'
5import { useUserStore } from './stores/user'
6
7const app = createApp(App)
8
9// 注册 Pinia
10app.use(createPinia())
11
12// 注册 Store
13app.provide('user', useUserStore())
14
15app.mount('#app')5. 使用 Store
在组件中使用 Store 非常简单，只需要通过 useStore 函数获取 Store 实例即可。
Javascript
1// components/Login.vue
2import { defineComponent } from 'vue'
3import { useUserStore } from '@/stores/user'
4
5export default defineComponent({
6 setup() {
7 const userStore = useUserStore()
8
9 const handleLogin = (user) => {
10 userStore.login(user)
11 }
12
13 return {
14 userStore,
15 handleLogin
16 }
17 }
18})6. 多个 Store
Pinia 支持创建多个 Store，每个 Store 都有自己的命名空间，这样可以更好地组织状态。
Javascript
1// stores/counter.js
2import { defineStore } from 'pinia'
3
4export const useCounterStore = defineStore('counter', {
5 state: () => ({ count: 0 }),
6 actions: {
7 increment() {
8 this.count++
9 }
10 }
11})7. 嵌套 Store
Pinia 还支持嵌套 Store，这样可以更细粒度地管理状态。
Javascript
1// stores/nested.js
2import { defineStore } from 'pinia'
3
4export const useNestedStore = defineStore('nested', {
5 state: () => ({
6 subStore: {
7 count: 0
8 }
9 }),
10 actions: {
11 increment() {
12 this.subStore.count++
13 }
14 }
15})8. Store 导航守卫
在 Vue Router 中，可以使用 Store 来控制导航。
Javascript
1// router/index.js
2import { createRouter, createWebHistory } from 'vue-router'
3import { useUserStore } from '@/stores/user'
4
5const router = createRouter({
6 history: createWebHistory(),
7 routes: [
8 {
9 path: '/',
10 name: 'home',
11 component: Home
12 },
13 {
14 path: '/dashboard',
15 name: 'dashboard',
16 component: Dashboard,
17 beforeEnter: (to, from, next) => {
18 const userStore = useUserStore()
19 if (userStore.isLoggedIn) {
20 next()
21 } else {
22 next('/login')
23 }
24 }
25 }
26 ]
27})
28
29export default router9. 存储持久化
有时候我们需要将 Store 中的数据持久化到本地存储中，Pinia 提供了插件机制来实现这一需求。
Javascript
1// plugins/persist.js
2import { createPersistedState } from "pinia-plugin-persistedstate";
3
4export default function setupPinia(app) {
5 const pinia = createPinia();
6
7 // 使用 pinia-plugin-persistedstate 插件
8 pinia.use(createPersistedState());
9
10 app.use(pinia);
11}10. 测试 Store
Pinia 提供了测试工具，方便进行单元测试。
Javascript
1// tests/unit/stores/user.spec.js
2import { shallowMount, createTestingPinia } from '@vue/test-utils'
3import { useUserStore } from '@/stores/user'
4
5describe('User Store', () => {
6 it('should log in and out correctly', async () => {
7 const wrapper = shallowMount(App, {
8 global: {
9 plugins: [createTestingPinia()],
10 },
11 })
12
13 const userStore = useUserStore()
14
15 expect(userStore.isLoggedIn).toBe(false)
16
17 await userStore.login({ name: 'John Doe' })
18
19 expect(userStore.isLoggedIn).toBe(true)
20 expect(userStore.user.name).toBe('John Doe')
21
22 await userStore.logout()
23
24 expect(userStore.isLoggedIn).toBe(false)
25 })
26})结语
Pinia 为 Vue 3 提供了一个简单而强大的状态管理解决方案。通过本文的介绍，你应该已经了解了如何在 Vue 3 项目中使用 Pinia 进行状态管理。Pinia 的灵活性和易用性使其成为许多开发者首选的状态管理库。
