Vue项目进阶：再谈Pinia函数式（composition API）用法

背景

Hello大家好，前段时间写了一篇关于Pinia的composition API用法的文章《Pinia进阶：优雅的setup（函数式）写法+封装到你的企业项目》，收到了不少朋友的反馈和建议。笔者也结合最近项目情况和网友们的建议做一次优化，也算是一个比较完整的版本了，这包括：

• options API 到 composition API写法的完整映射示例
• 补充composition API模式的ts类型提示补充
• 关于Store实例的内置函数一些思考
• 工程项目下pinia相关模块封装

本文的所有demo专门开了个GitHub项目来保存，有需要的同学可以拿下来实践。🌹🌹

认识Pinia

相信在座各位假如使用Vue生态开发项目情况下，对Pinia状态管理库应该有所听闻或正在使用，假如还没接触到Pinia，这篇文章可以帮你快速入门，并如何在企业项目中更优雅封装使用。

Pinia读音：/piːnjʌ/，是Vue官方团队推荐代替Vuex的一款轻量级状态管理库。 它最初的设计理念是让Vue Store拥有一款Composition API方式的状态管理库，并同时能支持 Vue2.x版本的Option API 和 Vue3版本的setup Composition API开发模式，并完整兼容Typescript写法（这也是优于Vuex的重要因素之一），适用于所有的vue项目。前段时间尤雨溪也说过Pinia其实就是Vuex5，其诞生是更好服务于Vue3的。

比起Vuex，Pinia具备以下优点：

• 完整的 TypeScript 支持：与在 Vuex 中添加 TypeScript 相比，添加 TypeScript 更容易
• 极其轻巧(体积约 1KB)
• store 的 action 被调度为常规的函数调用，而不是使用 dispatch 方法或 MapAction 辅助函数，这在 Vuex 中很常见
• 支持多个Store
• 支持 Vue devtools、SSR 和 webpack 代码拆分

Pinia与Vuex代码分割机制

上述的Pinia轻量有一部分体现在它的代码分割机制中。

举个例子：某项目有3个store「user、job、pay」，另外有2个路由页面「首页、个人中心页」，首页用到job store，个人中心页用到了user store，分别用Pinia和Vuex对其状态管理。

先看Vuex的代码分割： 打包时，vuex会把3个store合并打包，当首页用到Vuex时，这个包会引入到首页一起打包，最后输出1个js chunk。这样的问题是，其实首页只需要其中1个store，但其他2个无关的store也被打包进来，造成资源浪费。

Pinia的代码分割： 打包时，Pinia会检查引用依赖，当首页用到job store，打包只会把用到的store和页面合并输出1个js chunk，其他2个store不耦合在其中。Pinia能做到这点，是因为它的设计就是store分离的，解决了项目的耦合问题。

Pinia的 Composition API 写法

事不宜迟，直接开始使用Pinia。

1. 安装

yarn add pinia
# or with npm
npm install pinia 

2. 项目引入

import { createPinia } from 'pinia'

app.use(createPinia()) 

3. 创建第一个store

定义store模式有2种：options API 和 composition API。

前者不做细述了，社区文章一大堆；使用composition API模式定义store，符合Vue3 setup的编程模式，让结构更加扁平化，个人推荐推荐使用这种方式。

在src/store/counterForSetup.ts创建第一个的store：

import { ref, computed } from 'vue';
import { defineStore } from 'pinia';

// 使