harlem
@nuxtjs/harlem

Harlem 是一個簡單、無偏見、輕量級且可擴充套件的 Vue 3 狀態管理解決方案。

@nuxtjs/harlem

npm versionnpm downloadsGithub Actions CICodecovLicense

HarlemNuxt 的整合

Harlem 是一個簡單、無偏見、輕量級且可擴充套件的 Vue 3 狀態管理解決方案。它旨在適用於各種規模的專案和不同經驗水平的開發者。

功能

  • 👌 無需配置
  • 🐨 簡單、實用的狀態管理
  • 🧱 易於擴充套件
  • 💯 支援 Nuxt 3

快速設定

  1. @nuxtjs/harlem 依賴新增到您的專案中
npx nuxi@latest module add harlem
  1. @nuxtjs/harlem 新增到 nuxt.config.tsmodules 部分
  2. 請遵循 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 許可證