Vue3可以不用Pinia了?

目录

前言

为什么选择组合式API进行状态管理

案例Demo

结论

前言

随着Vue 3的发布，开发者们获得了许多新的特性和改进，其中之一就是对组合式API（Composition API）的支持。这个API允许以更灵活和逻辑化的方式组织代码，同时为状态管理和逻辑复用提供了强大的支持。在本文中，我们将探讨如何通过组合式API直接管理应用状态，而无需依赖额外的状态管理库如Pinia。

为什么选择组合式API进行状态管理

组合式API不仅简化了组件内部逻辑的组织方式，还使得逻辑复用变得更加直观。通过定义可重用的函数，我们可以将特定功能相关的状态和行为封装起来，然后在多个组件间共享。这种方法减少了对于专门的状态管理库的需求，特别是在小型到中型的应用程序中。

案例Demo

让我们来看一个具体的例子——创建一个简单的计数器。这里我们不采用任何外部状态管理库，而是利用Vue 3内置的功能来实现。

当前Vue版本：最新的vue3版本 v3.5.x

添加一个useCount.ts文件，申明一个组合式函数。

// useCount.ts

import { computed, readonly, ref } from 'vue'

const count = ref<number>(0)
const useCount = () => {
  const doubleCount = computed(() => {
    return count.value * 2
  })
  const setCount = (v: number) => {
    count.value = v
  }
  return {
    // readonly可以确保引用对象不会被修改
    count: readonly(count),
    doubleCount,
    setCount,
  }
}
export default useCount

了解javascript函数机制的我们知道useCount本身是一个闭包，每次调用，里面的ref就会重新生成，count就会重置，所以我们需要把count的声明暴露在全局环境中，这样在import时就会申明了，调用函数时不会被重置，现在我们多次调用时，发现可以共享了。

但是这个时候count是比较危险的，store应该可以保护state不被外部所修改，很简单，我们只需要用readonly包裹一下返回的值

页面中解构使用

import useCount from '@/store/useCount'

const { count, setCount } = useCount()
const { doubleCount } = useCount()

onMounted(async () => {
  console.log('count', count.value, doubleCount.value)  // 0 0
  setCount(10)
  console.log('count', count.value, doubleCount.value)  // 10 20
  
})

上述代码展示了如何在组件挂载时初始化并打印计数器的初始值及更新后的值。

结论

虽然像Pinia这样的库提供了非常成熟且强大的状态管理解决方案，但Vue 3的组合式API也为小规模或中等复杂度的应用提供了一种轻量级的选择。通过合理地利用这些新特性，你可以构建出既高效又易于维护的应用程序，但是放弃pinia也就意味着放弃了它自带的一些方法store.$state，store.$patch等等，这些方法实现很简单，很轻松就可以手写出来，如果你是这些方法的重度用户，保留pinia也没问题。