@nuxtjs/harlem

Harlem 为 Nuxt 提供的集成

Harlem 是一个简单、不武断、轻量级且可扩展的 Vue 3 状态管理解决方案。它旨在适用于各种规模的项目和不同经验水平的开发者。

特性

👌 零配置要求
🐨 简单、函数式的状态管理
🧱 易于扩展
💯 Nuxt 3 支持

快速设置

将 @nuxtjs/harlem 依赖项添加到您的项目

npx nuxi@latest module add harlem

将 @nuxtjs/harlem 添加到 nuxt.config.ts 的 modules 部分
按照 Harlem 指南了解如何创建和使用您的 store。
注意： createStore 将在您使用它的任何地方自动导入，因此您无需自行导入。

示例

这是一个最小的示例 - 您可以将其复制并粘贴到您的应用程序中，无需额外的步骤。

`~/stores/user.ts`

const STATE = {
  firstName: 'John',
  lastName: 'Smith',
}

export const { state, getter, mutation, ...store } = createStore('user', STATE)

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

export const setFirstName = mutation<string>('setFirstName', (state, payload) => {
  state.firstName = payload
})

export const setLastName = mutation<string>('setLastName', (state, payload) => {
  state.lastName = payload
})

`~/app.vue`

<template>
  <div class="app">
    <h1>Hello {{ fullName }}</h1>
    <input v-model="firstName" type="text" placeholder="First name" />
    <input v-model="lastName" type="text" placeholder="Last name" />
  </div>
</template>

<script lang="ts" setup>
  import { state, fullName, setFirstName, setLastName } from '~/store/user'

  const firstName = computed({
    get: () => state.firstName,
    set: value => setFirstName(value),
  })

  const lastName = computed({
    get: () => state.lastName,
    set: value => setLastName(value),
  })

  setLastName('Doe')
</script>

有关更多信息和示例，请查看 Harlem 文档和仓库。

开发

克隆此仓库
使用 corepack enable 启用 Corepack
使用 pnpm install 安装依赖项
运行 pnpm prepare 以生成类型存根。
使用 pnpm dev 在开发模式下启动 playground。

许可

MIT 许可