Harlem：Vue 3 的强大而简单的全局状态管理

项目介绍

哈莱姆（Harlem）是专为 Vue 3 设计的一款轻量级、树摇友好且模块化的全球状态管理库。它提供了简单直观的功能性API来创建、读取和修改状态。Harlem确保所有从存储中暴露的状态都是不可变的，从而保证了状态的可预测性和审计能力。此外，它不依赖任何外部库，支持TypeScript，集成Vue DevTools，并且可以通过插件和扩展进行功能扩展，适用于从小型应用到大型企业级软件开发。

项目快速启动

安装Harlem

要开始使用Harlem，首先通过以下命令安装：

# 使用Yarn
yarn add harlem

# 或者使用npm
npm install harlem

对于开发环境，默认情况下启用了Devtools插件，而在生产构建时会被自动剔除。如果你不需要开发期间的Devtools，可以安装@harlem/core。

创建你的第一个商店(Store)

假设我们要创建一个简单的用户信息存储：

// stores/user.js
import { createStore } from 'harlem';

const STATE = {
    firstName: '张三',
    lastName: '李四',
};

export const [state, getter, mutation, action, store] = createStore('user', STATE);

export const fullName = getter('fullname', (state) => `${state.firstName} ${state.lastName}`);

export const setFirstName = mutation('set-first-name', (state, payload) => {
    state.firstName = payload;
});

export const setLastName = mutation('set-last-name', (state, payload) => {
    state.lastName = payload;
});

export const loadDetails = action('load-details', async (mutate) => {
    // 假设这是一个API调用
    // const response = await fetch('/api/details');
    // const details = await response.json();
    // mutate(state => [state.details = details]);
});

在应用中使用商店

接下来，在Vue组件中使用这个store：

<template>
    <div>
        <h1>你好，{{ fullName }}</h1>
        <button @click="loadDetails()">加载详情</button>
        <input type="text" v-model="firstName" placeholder="名字">
        <input type="text" v-model="lastName" placeholder="姓氏">
    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { state, fullName, setFirstName, setLastName, loadDetails } from './stores/user';

const firstName = computed({
    get: () => state.firstName,
    set: value => setFirstName(value),
});
const lastName = computed({
    get: () => state.lastName,
    set: value => setLastName(value),
});
</script>

应用案例和最佳实践

在实际应用中，利用Harlem的模块化特性，你可以针对不同的业务模块创建独立的store，保持应用状态的清晰和隔离。最佳实践包括：

• 按功能划分Stores：每个store负责应用程序中的一个特定部分或功能。
• 使用getter提高可读性：通过getter封装复杂的计算逻辑，使模板更加简洁易懂。
• 异步操作通过actions处理：确保数据获取和更新通过actions执行，以便跟踪和调试。

典型生态项目

虽然直接的“典型生态项目”提及较少，但Harlem设计上鼓励自定义扩展和插件的创建。例如，@harlem/extension-action用于高级动作支持，@harlem/plugin-devtools提供Devtools集成等，这些都是构建复杂应用时不可或缺的生态组成部分。

开发者可以根据具体需求选择或开发适合自己的扩展，来增强Harlem的功能，比如实现撤销/重做、懒加载数据等高级特性。

---

以上就是关于Harlem的基本介绍、快速启动指南以及一些最佳实践建议。通过这些步骤，你可以轻松地在Vue 3项目中集成和利用Harlem进行高效的状态管理。