Vue 3的简单不可变状态管理– harlem.js

Vue 3的简单不可变状态管理– harlem.js
插件名称 harlem
版本号 v1.1.0
发布时间 2020年11月10日
插件作者 andrewcourtice

harlem.js是Vue 3的简单,不受限制,不可变,轻量级和可扩展的状态管理。

安装和下载:

# Yarn
$ yarn add @harlem/core

# NPM
$ npm i @harlem/core --save

如何使用它:

1.导入并注册harlem.js。

import App from './app.vue';
import Harlem from '@harlem/core';
createApp(App)
  .use(Harlem)
  .mount('#app')

2.基本用法:

import {
  createStore
} from '@harlem/core';
const STATE = {
  firstName: 'John',
  lastName: 'Smith'
};
const {
  getter,
  mutation,
  ...store
} = createStore('user', STATE);
export const state = store.state;
export const fullName = getter('fullname', state => `${state.firstName} ${state.lastName}`);
export const setFirstName = mutation('setFirstName', (state, payload) => {
  state.firstName = payload || '';
});
export const setLastName = mutation('setLastName', (state, payload) => {
  state.lastName = payload || '';
});
// in your app
<template>
    <div class="app">
        <h1>Hello {{ fullName }}</h1>
        <input type="text" v-model="firstName" placeholder="First name">
        <input type="text" v-model="lastName" placeholder="Last name">
    </div>
</template>
<script lang="ts">
import {
    defineComponent,
    computed
} from 'vue';
import {
    state,
    fullName,
    setFirstName,
    setLastName
} from './stores/user';
export default defineComponent({
  setup() {
      const firstName = computed({
          get: () => state.firstName,
          set: setFirstName
      });
      const lastName = computed({
          get: () => state.lastName,
          set: setLastName
      });
      return {
          firstName,
          lastName,
          fullName
      };
  }
});
</script>

变更日志:

v1.1.0(02/22/2021)

  • 从突变中添加了可选的返回类型
  • 添加了更多上下文类型名称
  • 更改的插件事件名称

v1.0.19(02/12/2021)

  • 更新

v1.0.18(2020年12月29日)

  • 更新

v1.0.17(2020年12月13日)

  • 更新资料

v1.0.18(2020年12月29日)

  • 更新资料