Pinia 进阶指南：解锁函数式 setup 的优雅，掌控封装之道

前端

2023-10-06 01:16:10

Pinia 进阶秘籍：函数式 setup 和封装的力量

函数式 setup 的魅力

函数式 setup 是一种强大的技术，它将状态管理与组件分离，带来一系列好处：

清晰易读： 函数式 setup 将状态管理逻辑与组件逻辑分离，使代码结构更加清晰易读。
高重用性： 定义在函数式 setup 中的状态和方法可以被多个组件共享，提高代码重用率。
增强可测试性： 无副作用的特性使函数式 setup 非常适合单元测试，方便全面测试状态管理逻辑。

封装的艺术

封装是提升大型项目可维护性和可扩展性的关键。Pinia 的封装机制让你可以将状态管理逻辑组织成模块化的单元，带来以下优势：

代码复用： 封装后的状态管理单元可以轻松复用，减少代码冗余，提高开发效率。
高扩展性： 封装机制允许轻松扩展状态管理逻辑，适应不断变化的项目需求。
协作效率提升： 通过封装，不同开发人员可以专注于特定模块，提高协作效率，避免代码冲突。

实战示例

为了演示函数式 setup 和封装的优势，我们以一个企业项目中的用户状态管理为例：

状态管理函数：

import { defineStore } from 'pinia'

export const userStore = defineStore('user', () => {
  const users = ref([])
  const currentUser = ref(null)
  const cart = ref([])

  return { users, currentUser, cart }
})

组件：

<template>
  <div>
    <p>用户列表：{{ $store.user.users }}</p>
    <p>当前用户：{{ $store.user.currentUser }}</p>
  </div>
</template>

<script>
import { userStore } from './user'

export default {
  setup() {
    const store = userStore()

    // ...
  }
}
</script>

封装：

为了避免代码重复，我们将用户状态管理逻辑封装成一个模块：

import { userStore } from './user'

export const userModule = () => {
  const store = userStore()

  return {
    getUsers: () => store.users,
    getCurrentUser: () => store.currentUser,
    addToCart: (item) => store.cart.value.push(item),
    // ...
  }
}