一个轻量级微信小程序状态管理库。
通过 npm:
npm install atomuconst { createStore } = require('atomu');
const store = createStore({
state: {
count: 0,
},
actions: {
increment({ set, get }) {
set({ count: get().count });
},
},
});在逻辑层中，绑定 store：
Component({
lifetimes: {
attached() {
this.$store = store.bind(this, ['count'], '$store');
},
detached() {
this.$store.unbind();
},
},
methods: {
increment() {
this.$store.dispatch('increment');
},
},
});完成绑定后，可以在视图层中轻松访问并使用 store 中存储的状态：
<button wx:bind="increment">count: {{ $store.count }}</button>TIP: 组件销毁后，请务必手动进行解绑操作，以避免潜在的内存泄漏问题。
actions 可以接收 dispatch 方法传递的载荷，从而灵活处理各种业务逻辑：
actions: {
increment({ set, get }, payload) {
set({ count: payload });
}
}
store.dispatch('increment', 0)actions 支持异步操作:
actions: {
async increment({ set, get }) {
// await ...
set({ count: get().count });
}
}调用 dispatch 方法时，会返回一个 Promise 实例，能够方便地判断异步 action 的执行状态：
store
.dispatch('increment')
.then(() => {
// ...
})
.catch(() => {
// ...
});Component({
lifetimes: {
attached() {
this.unsubscribe = store.subscribe((mutation, state) => {
console.log(mutation, state);
});
},
detached() {
this.unsubscribe();
},
},
});Component({
lifetimes: {
attached() {
this.$store = store.bind(this, ['count'], '$store');
this.$user = user.bind(this, ['profile'], '$user');
},
detached() {
this.$store.unbind();
this.$user.unbind();
},
},
});bind(ctx: Component | Page, stateKeys?: string[], namespace?: string)
bind 方法用于将 store 中的状态绑定到组件中，通过 stateKeys 参数，可以指定需要绑定的具体状态（若未指定，则默认绑定 store 中的所有状态）。而 namespace 则用于为绑定的状态创建一个独立的空间，确保在状态更新时仅更新该空间内的状态，这在同时绑定多个 store 时尤为实用，有助于避免状态之间的混淆和冲突。
bind 方法所绑定的状态都会自动存储在组件的 data 对象中，方便在组件内部直接使用这些状态数据：
Component({
lifetimes: {
attached() {
this.$store = store.bind(this, ['count'], '$store');
},
detached() {
this.$store.unbind();
},
},
methods: {
increment() {
// 访问状态
this.$store.dispatch('increment', this.data.$store.count);
},
},
});getState()
getState 方法用于在组件外部获取状态：
store.getState();日志插件用于一般的调试：
const { createLogger } = require('atomu');
const store = createStore({
plugins: [createLogger()],
});createLogger 函数有几个配置项：
createLogger({
collapsed: false, // 自动展开记录的 mutation
filter(mutation, state) {
// 若 mutation 需要被记录，就让它返回 true 即可
// `mutation` 的格式是 `{ type, payload }`
return mutation.type !== 'ignore';
},
logger: console, // 自定义 console 实现，默认为 `console`
});持久化插件用于本地缓存 store 中的状态：
const { createPersistedState } = require('atomu');
const store = createStore({
plugins: [createPersistedState()],
});createPersistedState 函数有几个配置项：
createPersistedState({
key: 'atomu', // 本地缓存中指定的 key
filter(mutation, state) {
// 若 mutation 需要被记录，就让它返回 true 即可
// `mutation` 的格式是 `{ type, payload }`
return mutation.type !== 'ignore';
},
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent