Vue 3 状态管理 Pinia 详解

引言

随着 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 pinia

3. 创建 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 router

9. 存储持久化

有时候我们需要将 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 的灵活性和易用性使其成为许多开发者首选的状态管理库。