@nuxtjs/harlem
Harlem 是一款简单、无侵入、轻量级且可扩展的 Vue 3 状态管理解决方案。它旨在满足各种规模的项目和不同经验水平的开发人员的需求。
特性
- 👌 无需配置
- 🐨 简单、函数式状态管理
- 🧱 易于扩展
- 💯 支持 Nuxt 3
快速设置
- 将
@nuxtjs/harlem依赖项添加到您的项目中
yarn add @nuxtjs/harlem # or npm install @nuxtjs/harlem
- 将
@nuxtjs/harlem添加到nuxt.config.ts文件的modules部分 - 按照 Harlem 指南了解如何创建和使用您的存储。
注意：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（对于 Node.js < 16.10，请使用npm i -g corepack） - 使用
pnpm install安装依赖项。 - 运行
pnpm prepare生成类型存根。 - 使用
pnpm dev在开发模式下启动 游乐场。