act-master v2.7.0

Act-Master

A way to separate business logic from application view.

The easiest library to create a flexible application architecture.

To work with Vue, there are now even fewer dependencies. Just use act-mater.

📗 Documentation

🧪 Test writing with "ActTest"

Example

Installation

npm install act-master

Usage

// main.ts
import { act } from 'act-master';
import { VueActMaster } from 'act-master/vue';
import { createApp } from 'vue';

import { actions } from '@/act/actions';

act.init({
  actions,
});

VueActMaster.setActMaster(act());

const app = createApp(App);

app.use(VueActMaster); // Installation

// @/act/actions
export const actions: ActMasterAction[] = [
  new GetDataAction(),
];

// action-get-data.ts
import { ActMasterAction } from 'vue-act-master';

export class GetDataAction implements ActMasterAction {
  name = 'GetData';

  async exec() {
    const url = 'https://jsonplaceholder.typicode.com/todos/1';

    const response = await fetch(url);
    return response.json();
  }
}

The action is now available to you in components and you can easily highlight the business logic.

This will help you test components and change the API more easily.

// App.vue

<script>
import { act } from 'act-master'

export default {
  data() {
    return {
      myData1: null,
      myData2: null,
    };
  },

  async mounted() {
    console.log(this.myData1, this.myData2); // null, null

    // Subscribe
    act().on('GetData', (data) => {
      this.myData2 = data;
    });

    this.myData1 = await this.$act.exec('GetData');

    console.log(this.myData1, this.myData2);
    // {
    //   "userId": 1,
    //   "id": 1,
    //   "title": "delectus aut autem",
    //   "completed": false
    // },
    // {
    //   "userId": 1,
    //   "id": 1,
    //   "title": "delectus aut autem",
    //   "completed": false
    // }
  }
}
</script>