@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 指南 了解如何建立和使用您的 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（對於 Node.js < 16.10，請使用npm i -g corepack） - 使用
pnpm install安裝依賴項 - 執行
pnpm prepare以產生類型存根。 - 使用
pnpm dev在開發模式下啟動 遊樂場。