https://github.com/avil13/vue-act-master

The easiest library to create a flexible application architecture. A way to separate business logic from application view.
https://github.com/avil13/vue-act-master

actions api dependency-injection emitter nuxt vue

Last synced: 19 days ago
JSON representation

The easiest library to create a flexible application architecture. A way to separate business logic from application view.

• Host: GitHub
• URL: https://github.com/avil13/vue-act-master
• Owner: avil13
• License: mit
• Created: 2020-02-18T16:40:06.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-27T07:06:34.000Z (7 months ago)
• Last Synced: 2024-04-27T17:50:02.552Z (7 months ago)
• Topics: actions, api, dependency-injection, emitter, nuxt, vue
• Language: TypeScript
• Homepage: https://avil13.github.io/vue-act-master/
• Size: 4.03 MB
• Stars: 3
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Act-Master

A way to separate business logic from application view.

The easiest library to create a flexible application architecture.

![npm bundle size](https://img.shields.io/bundlephobia/minzip/act-master)

![npm version](https://img.shields.io/npm/v/act-master)

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



  



---

## 📗 [Documentation](https://avil13.github.io/vue-act-master/)

## 🧪 [Test writing with "ActTest"](https://github.com/avil13/vue-act-master/blob/master/packages/act-master/src/test-utils/README.md)

---

# Example

## Installation

```bash

npm install act-master

```

# Usage

```ts

// 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

```

```ts

// @/act/actions

export const actions: ActMasterAction[] = [

  new GetDataAction(),

];

```

```ts

// 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.

```html

// App.vue

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

    // }

  }

}

```