brass

基于RxJS和Immer的轻量级响应式状态管理器

安装

yarn add @jaqen404/brass

or

npm install @jaqen404/brass

使用

// store.js
import { createStore } from "brass"
const state = {
  count: 1,
  people: {
    name: "tom",
    age: 11,
  },
}
const getters = {
  doubleCount: (state: State) => state.count * 2,
}
const mutations = {
  // 注意：mutasions方法里，不能有返回值
  add: (amount: number) => (state: any) => {
    state.count += amount
  },
  changeName: (name: string) => (state: any) => {
    state.people.name = name
  },
}
const actions = {
  doAsync:
    (a: number, b: number) =>
    async ({ mutations }) => {
      await new Promise((resolve: any) => {
        setTimeout(resolve, 3000)
      })
      mutations.sum(a, b)
      return a + b
    },
}
export const firstStore = createStore(
  "firstStore",
  state,
  getters,
  mutations,
  actionss
)

// 响应式获取 state
import { state$ } from "@jaqen404/brass"
let state = {}
state$.subscribe((data: any) => {
  state = data.state
})

// 响应式获取 getters
import { getters$ } from "@jaqen404/brass"
let getters = {}
getters$.subscribe((data: any) => {
  getters = data.getters
})

// 同时获取 state | getters
import { brassData$ } from "@jaqen404/brass"
let getters = {}
let state = {}
brassData$.subscribe((data: any) => {
  state = data.state
  getters = data.getters
})

// 使用 mutations
import { firstStore } from "./store"
firstStore.mutations.add(1)

// 使用 actions
import { firstStore } from "./store"
firstStore.actions.doAsync(10, 100)

// 使用 setState
// 注意：setState方法里，不能有返回值
import { firstStore } from "./store"
firstStore.setState((state) => {
  state.people.name = state.people.name + state.count
})

vue 中使用

vue-brass 插件

FAQ

命名由来？

Brass 伯明翰，是一款经典的德式策略桌面游戏，背景是优雅而辉煌的维多利亚时代，玩家扮演工业革命期间白手起家的商人，缔造属于各自的英伦传奇。