首页
/ Harlem:Vue 3 的强大而简单的全局状态管理

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

2024-09-24 15:15:27作者:廉彬冶Miranda

项目介绍

哈莱姆(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进行高效的状态管理。

登录后查看全文
热门项目推荐